jQuery操作checkbox选择

一、通过选择器选取CheckBox:
  1.给CheckBox设置一个id属性，通过id选择器选取：
    <input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" />
    JQuery:
        $("#chkOne").click(function(){});

  2.给CheckBox设置一个class属性，通过类选择器选取：
    <input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" />
    JQuery:
        $(".chkTwo").click(function(){});

  3.通过标签选择器和属性选择器来选取：
   <input type="checkbox" name="someBox"  value="1" checked="checked" />
   <input type="checkbox" name="someBox" value="2" />
   JQuery:
        $("input[name='someBox']").click(function(){});

二、对CheckBox的操作：</span>
     以这段checkBox代码为例：
   <input type="checkbox" name="box"  value="0" checked="checked" />
   <input type="checkbox" name="box" value="1" />
   <input type="checkbox" name="box" value="2" />
   <input type="checkbox" name="box" value="3" /> 

   1.遍历checkbox用each()方法：
       $("input[name='box']").each(function(){});

   2.设置checkbox被选中用attr();</span>
   方法：
     $("input[name='box']").attr("checked","checked");

  注：但此方法在jquery1.9.1中，有些处理不一样
  E10，Chrome,FF中，对于选中状态，第一次$('#checkbox').attr('checked',true)可以实现
  但是当通过代码清除选中，下次再通过代码 $('#checkbox').attr('checked',true) 去选中时
  虽然代码中有checked='checked',但是画面表现都没有打勾。
  IE8，IE6下无此问题。后来调查了相关的资料，发现现在attr('checked',true)都换成prop('checked',true)
 设置选中与不选中状态：
 $('#checkbox').prop('checked',true)
  在HTML中，如果一个复选框被选中，对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked"，所以判断  if("checked"==$("#id").attr("checked")) 是错误的，应该是 if(true == $("#id").attr("checked"))

3.获取被选中的checkbox的值：
    $("input[name='box'][checked]").each(function(){
     if (true == $(this).attr("checked")) {
           alert( $(this).attr('value') );
    }

  或者：
    $("input[name='box']：checked").each(function(){
    if (true == $(this).attr("checked")) {
          alert( $(this).attr('value') );
    }
   $("input[name='box']：checked")与 $("input[name='box']")有何区别没试过，我试了用 $("input[name='box']")能成功。

4.获取未选中的checkbox的值：
    $("input[name='box']").each(function(){
          if ($(this).attr('checked') ==false) {
                alert($(this).val());
            }
     });

5.设置checkbox的value属性的值:
          $(this).attr("value",值);
 

============================

以下是C# MVC中的一个小例子

<tr>
        <td rowspan="2"><span>禁止星期：</span></td>
    </tr>
    <tr>
        <td align="center" colspan="3">
            <div class="div1">
                @Html.CheckBoxList("weekdays", true)
                <span class="help-inline">@Html.ValidationMessageFor(m => m.checkWeekdays)</span>
            </div>
        </td>
    </tr>

========================以下是渲染后的HTML

<tr>
        <td rowspan="2"><span>禁止星期：</span></td>
    </tr>
<tr>
        <td align="center" colspan="3">
            <div class="div1">
                <label style="display:inline;"> <input id="weekdays" name="weekdays" style="border:none;" type="checkbox" value="7">  星期日</label>
		<label style="display:inline;"> <input id="weekdays" name="weekdays" style="border:none;" type="checkbox" value="1">  星期一</label>
		<label style="display:inline;"> <input id="weekdays" name="weekdays" style="border:none;" type="checkbox" value="2" checked="checked">  星期二</label>
		<label style="display:inline;"> <input id="weekdays" name="weekdays" style="border:none;" type="checkbox" value="3">  星期三</label>
		<label style="display:inline;"> <input id="weekdays" name="weekdays" style="border:none;" type="checkbox" value="4">  星期四</label>
		<label style="display:inline;"> <input id="weekdays" name="weekdays" style="border:none;" type="checkbox" value="5">  星期五</label>
		<label style="display:inline;"> <input id="weekdays" name="weekdays" style="border:none;" type="checkbox" value="6">  星期六</label>
                <span class="help-inline"><span class="field-validation-valid" data-valmsg-for="checkWeekdays" data-valmsg-replace="true"></span></span>
            </div>
        </td>
    </tr>

=====================这是JS代码

//页面加载的时候，星期选中当前天
        var mydate = new Date();
        var t = mydate.getDay();
        $(":checkbox").each(function () {
            if ($(this).val()==t) {
                $(this).attr("checked", true);
            }
        })

        //按钮提交之前检测星期是否有选中
        $("#submit").click(function () {
            var ret = 1;
            $(":checkbox").each(function () {
                if ($(this).is(':checked')) {
                    ret=0;
                }
            })
            $("#checkWeekdays").val(ret+"");
        });

1、checkbox list选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            // 全选

            $("#btnCheckAll").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", true);

            });

 

            // 全不选

            $("#btnCheckNone").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", false);

            });

 

            // 反选

            $("#btnCheckReverse").bind("click", function () {

                $("[name = chkItem]:checkbox").each(function () {

                    $(this).attr("checked", !$(this).attr("checked"));

                });

            });

 

            // 全不选

            $("#btnSubmit").bind("click", function () {

                var result = new Array();

                $("[name = chkItem]:checkbox").each(function () {

                    if ($(this).is(":checked")) {

                        result.push($(this).attr("value"));

                    }

                });

 

                alert(result.join(","));

            });

        });

    </script>

</head>

<body>

    <div>

        <input name="chkItem" type="checkbox" value="今日话题" />今日话题

        <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点

        <input name="chkItem" type="checkbox" value="财经" />财经

        <input name="chkItem" type="checkbox" value="汽车" />汽车

        <input name="chkItem" type="checkbox" value="科技" />科技

        <input name="chkItem" type="checkbox" value="房产" />房产

        <input name="chkItem" type="checkbox" value="旅游" />旅游

    </div>

    <div>

        <input id="btnCheckAll" type="button" value="全选" />

        <input id="btnCheckNone" type="button" value="全不选" />

        <input id="btnCheckReverse" type="button" value="反选" />

        <input id="btnSubmit" type="button" value="提交" />

    </div>

</body>

</html>

2、checkbox table选中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        table

        {

            border-collapse: collapse;

        }

        td

        {

            border: 1px solid #ccc;

        }

    </style>

    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            // chkAll全选事件

            $("#chkAll").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", this.checked);

            });

 

            // chkItem事件

            $("[name = chkItem]:checkbox").bind("click", function () {

                var $chk = $("[name = chkItem]:checkbox");

                $("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);

            })

        });

    </script>

</head>

<body>

    <table id="tb">

        <thead>

            <tr>

                <td>

                    <input id="chkAll" type="checkbox" />

                </td>

                <td>

                    分类名称

                </td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="今日话题" />

                </td>

                <td>

                    今日话题

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="视觉焦点" />

                </td>

                <td>

                    视觉焦点

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="财经" />

                </td>

                <td>

                    财经

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="汽车" />

                </td>

                <td>

                    汽车

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="科技" />

                </td>

                <td>

                    科技

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="房产" />

                </td>

                <td>

                    房产

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="旅游" />

                </td>

                <td>

                    旅游

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

补充..............