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"]),

时间: 2024-12-24 10:07:03

jQuery 获取和设置radio 和 checkbox 值的操作的相关文章

jquery获取和设置radio,check,select选项

select控件选项 1,获取select选中的value值 $("#selectID").val(); 2,获取select选中的text的值 $("#selectID").find("option:selected").text() 3,设置select的第几项为当前选中项 $("#selectID").attr("value",2);//设置第二项为当前选中项 4,添加option $("s

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

JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查询,努力地为您提供了提供了这个页面. val()方法 此方法类似于JavaScript中的value属性,可以用来设置和获取元索的值.无论元素是文本框,下拉列表还足单选框,它都可以返回元素的值.如果元素为多选,则返回一个包含所有选择的值的数组.先看看下面的效果演示: 欢迎访问简明现代魔法图书馆 简单

Jquery 获取select,radio 和 checkbox的值

1,jquery获取select的值. $("#select1 option:selected").text(); 2,jquery 获取radio的值. $('#radio_id:radio:checked').val() 3,jquery获取checkbox的值. $("input[name='checkbox']:checkted").each(function(){ str += $(this).val()+"," })

jquery获取和设置radio,check,select选项 (转发)

select控件选项 1,获取select选中的value值 $("#selectID").val(); 2,获取select选中的text的值 $("#selectID").find("option:selected").text() 3,设置select的第几项为当前选中项 $("#selectID").attr("value",2);//设置第二项为当前选中项 4,添加option $("s

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

开发中遇到 通过 $("#content").val(); 或者 document.getElementById("content"); 并不能获取到 id 为 content的值  $("#content").val(--赋值的信息--); 也不能为 id 为 content 赋值: 页面代码: <tr> <td class="p12">内容:</td> <td colspan=&q

jQuery获取表单各元素的值

radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio']").eq(1).attr("checked",true);//设置第二项为选中项 <input type="text" name="textname" id="text_id" value="&quo

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

1 [jquery]常用的jquery获取表单对象的属性与值 2 3 4 1.JQuery的概念 5 6 7 8 9 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的JS效果. 10 11 12 2.JQuery实现了 代码的分离 13 14 不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了: 15 如: 16 $(function(){ 17 $("Ele

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

Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/39096/390963333.html 为了帮助网友解决“Jquery获取select optio”相关的问题,中国学网通过互联网对“Jquery获取select optio”相关的解决方案进行了整理,用户详细问题包括:jqueryselectie9  function GetFenceItemData(

jQuery获取选中复选框的值代码实例

jQuery获取选中复选框的值代码实例:复选框是最为常用的表单元素之一,它提供了一种多选的方式,下面介绍一下如何使用jQuery获取选中的checkbox复选框的值.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"