jQuery 获取和设置radio 和 checkbox 值的操作
jquery 中的val(),可以取值也可赋值,表单元素中的radio和checkbox是比较常用的控件,下面说说对它们的取值和赋值的使用
1、取值
表单如下:
<div class="items">
@if (Model.Question.type == "单选")
{
<div><input type="radio" id="A" name="sin" value="A" /><label for="A"><span class="item">A</span>@Model.Question.A</label></div>
<div><input type="radio" id="B" name="sin" value="B" /><label for="B"><span class="item">B</span>@Model.Question.B</label></div>
<div><input type="radio" id="C" name="sin" value="C" /><label for="C"><span class="item">C</span>@Model.Question.C</label></div>
<div><input type="radio" id="D" name="sin" value="D" /><label for="D"><span class="item">D</span>@Model.Question.D</label></div>
}
else if (Model.Question.type == "多选")
{
<div><input type="checkbox" id="A" name="mul" value="A" /><label for="A"><span class="item">A</span>@Model.Question.A</label></div>
<div><input type="checkbox" id="B" name="mul" value="B" /><label for="B"><span class="item">B</span>@Model.Question.B</label></div>
<div><input type="checkbox" id="C" name="mul" value="C" /><label for="C"><span class="item">C</span>@Model.Question.C</label></div>
<div><input type="checkbox" id="D" name="mul" value="D" /><label for="D"><span class="item">D</span>@Model.Question.D</label></div>
}
else
{
<div><input type="radio" id="A" name="jul" value="@Model.Question.A" /><label for="A"><span class="item"></span>@Model.Question.A</label></div>
<div><input type="radio" id="B" name="jul" value="@Model.Question.B" /><label for="B"><span class="item"></span>@Model.Question.B</label></div>
}
</div>
jquery代码:
$(".items input").click(function () {
var answer = "";
if (type == "单选") {
answer = $(":radio[name=sin]:checked").val();
alert(answer);
} else if (type == "多选") {
$(":checkbox[name=mul]:checked").each(function () {
answer += $(this).val() + ",";
});
} else {
answer = $("input:radio[name=jul]:checked").val();
}
$.post("/home/clickItem", { questionId: '@Model.Question.id', userAnswer: answer }, function (data) {
if (data != "ok") {
alert(data);
location.href = "/home/login";
}
});
});
radio 好取,只要取 :checked 选中的值,checkbox 可能是多选,需要循环取值
2、赋值
赋值可不能这样 $(":radio").val("B"),这种是不行的,使用数组的方式赋值,应该这样 $(":radio").val(["B"]) ,$(":checkbox").val(["A","C","D"]),
if (type == "单选") {
$(":radio[name=sin]").val([useranswer]);
} else if (type == "多选") {
var arr = useranswer.substring(, useranswer.length - ).split(","); //useranswer="B,C,D"这种形式转成数组
$(":checkbox[name=mul]").val(arr);
} else {
answer = $(":radio[name=jul]").val([useranswer]);
}
jQuery 获取和设置radio 和 checkbox 值的操作的更多相关文章
- JQuery获取与设置HTML元素的值value
JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...
- js / jquery 获取和设置 FCK Editor 的值
开发中遇到 通过 $("#content").val(); 或者 document.getElementById("content"); 并不能获取到 id 为 ...
- jquery】常用的jquery获取表单对象的属性与值
[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...
- Jquery获取select选中的文本与值
jquery获取select选择的文本与值获取select :获取select 选中的 text : $("#ddlregtype").find("option:s ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- jquery获取select选择的文本与值
jquery获取select选择的文本与值获取select :获取select 选中的 text : $("#ddlregtype").find("option:s ...
- Jquery获取select option动态添加自定义属性值失效
Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
随机推荐
- 20155233 2016-2017-2 《Java程序设计》第1周学习总结
20155233 2016-2017-2 <Java程序设计>第1周学习总结 教材学习内容总结 本周主要学习教材的第一章.第二章,了解了Java的发展历程,最基本的Java环境的搭建,以及 ...
- 20155317 王新玮 2016-2017-2 《Java程序设计》第5周学习总结
20155317 王新玮 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 异常处理 & Collection与Map 异常继承架构 错误的对象继承ja ...
- 20145209 实验四 《android开发基础》 实验报告
20145209 实验四 <android开发基础> 实验报告 实验内容 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBI ...
- MSP430FR6972的串口波特率设置代码
1. 本次使用ACLK,就是辅助时钟(32.768KHZ)作为串口的时钟源,那么使用波特率9600的时候,分频系数=32768/9600=3.41,所以是有小数位的,设置代码如下 UCA0CTLW0 ...
- HTML基本代码教学片,认识HTML
今儿头午有点晕晕的感觉,咳咳,甩甩头开课 HTML 定义:超文本标记语言 (记不住的可以这么记:how to make love ! 哈哈,准备开车,粗人一个,长的不行) 其实理解起来很简单,超越文本 ...
- mybatis拦截器使用
目录 mybatis 拦截器接口Interceptor spring boot + mybatis整合 创建自己的拦截器MyInterceptor @Intercepts注解 mybatis拦截器入门 ...
- MySQL数据库--连接
MySQL数据库的概念: MySQL数据库,包括客户端和服务端.客户端就是操作数据库的终端(命令行.navicat),服务端就是安装有MySQL软件的主机(本机或者服务器),MySQL数据库的端口一般 ...
- ubuntu/linux系统中安装jdk以及eclipse(附图解详细步骤)
1.首先得先下载JDK和eclipsejdk下载网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21 ...
- JSP整理
JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java servlet ...
- Python教程 深入条件控制
while 和 if 条件句中可以使用任意操作,而不仅仅是比较操作. 比较操作符 in 和 not in 校验一个值是否在(或不在)一个序列里.操作符 is 和 is not 比较两个对象是不是同一个 ...