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 值的操作的更多相关文章

  1. JQuery获取与设置HTML元素的值value

    JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...

  2. js / jquery 获取和设置 FCK Editor 的值

    开发中遇到 通过 $("#content").val(); 或者 document.getElementById("content"); 并不能获取到 id 为 ...

  3. jquery】常用的jquery获取表单对象的属性与值

    [jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...

  4. Jquery获取select选中的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  5. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  6. jquery获取select选择的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  7. Jquery获取select option动态添加自定义属性值失效

    Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...

  8. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  9. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

随机推荐

  1. 20155213 2016-2017-2 《Java程序设计》第六周学习总结

    20155213 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 输入与输出 串流设计 流(Stream)是对「输入输出」的抽象,注意「输入输出」是相对程序而 ...

  2. C语言复习20170716

    C语言复习20170716 C数据类型 图片来自:C语言基本数据类型简介 C语言程序处理的数据有常量和变量两种形式. 常量是在程序中不能改变其值的量.例如:整型常量.实型常量.字符常量.字符串常量和枚 ...

  3. # 2017-2018-1 20155337《信息安全系统设计基础》第5周学习总结+mybash

    2017-2018-1 20155337<信息安全系统设计基础>第5周学习总结 教材学习内容总结 不论我们是在用C语言还是用JAVA或是其他的语言编程时,我们会被屏蔽了程序的机器级的实现. ...

  4. WPF 带水印的密码输入框

    原文:WPF 带水印的密码输入框 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83652540 ...

  5. easyui -validatebox 验证框加载

    问题: easyui验证狂框有时会验证输入字符的位数,或者验证有效字符组合 解决: 使用easyui的验证框,继承验证框,指定输入框为验证框即可 $(function(){ $.extend($.fn ...

  6. 【LG3230】[HNOI2013]比赛

    题面 洛谷 题解 代码 \(50pts\) #include<iostream> #include<cstdio> #include<cstdlib> #inclu ...

  7. Zabbix学习之路(七)之Nginx的状态监控

    1.安装nginx [root@linux-node2 ~]# yum install -y nginx [root@linux-node2 ~]# mkdir /etc/zabbix/zabbix_ ...

  8. Drupal views中实现两列布局

    Views中的format有table,grid,unformatted list等,但是没有2 columns等选项. 如果要达到如下效果: 左侧一列有title,content,右侧一列image ...

  9. tomcat7以上的版本,400BadRequest

    出现此原因的解决办法其一,详情可见: https://www.cnblogs.com/dygrkf/p/9088370.html. 另一种解决方法,就是把url中不允许出现的字符编码,后台接收时再解码 ...

  10. Unity学习笔记(2): 如何使物体消失

    Unity使物体消失的三种方法 GameObject.Destroy(gameobjcet); //在下一帧破坏物体 gameObject.SetActive(false); //Unity2017新 ...