[jQuery]操作checkbox方法大全

对html中的checkbox元素的操作也是写网站和Web程序中常用的操作，在这里总结下对checkbox的取值、赋值、遍历、全选、全不选、反选等常用操作的代码。

1.获取checkbox选中项的值

$("input:checkbox:checked").val()
$("input:[type='checkbox']:checked").val();
$("input:[name='ck']:checked").val();

2. 获取多个checkbox选中项的值

$('input:checkbox').each(function() {
    if ($(this).attr('checked') ==true) {
        alert($(this).val());
    }
});

3.设置第一个checkbox 为选中值

$('input:checkbox:first').attr("checked",'checked');
$('input:checkbox').eq(0).attr("checked",'true');

4.设置最后一个checkbox为选中值

$('input:radio:last').attr('checked', 'checked');
$('input:radio:last').attr('checked', 'true');

5.根据索引值设置checkbox选中

$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
$('input:radio').slice(1,2).attr('checked', 'true');

6.选中多个checkbox同时选中第1个和第2个的checkbox

$('input:radio').slice(0,2).attr('checked','true');

7.根据Value值设置checkbox为选中值

$("input:checkbox[value='1']").attr('checked','true');

8.删除Value=1的checkbox

$("input:checkbox[value='1']").remove();

9.删除第几个checkbox

$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();

10.遍历checkbox

$('input:checkbox').each(function (index, domEle) {
  //具体代码
});

11.checkbox全选

$('input:checkbox').each(function() {
    $(this).attr('checked', true);
});

12.checkbox全部取消选中

$('input:checkbox').each(function () {
    $(this).attr('checked',false);
});

13.示例代码

<div>
    <input name="chk" type="checkbox" value="大众" />大众
    <input name="chk" type="checkbox" value="通用" />通用
    <input name="chk" type="checkbox" value="福特" />福特
    <input name="chk" type="checkbox" value="长安" />长安
    <input name="chk" type="checkbox" value="吉利" />吉利
    <input name="chk" type="checkbox" value="长城" />长城
    <input name="chk" type="checkbox" value="比亚迪" />比亚迪
</div>
<div>
    <input id="btnChkAll" type="button" value="全选" />
    <input id="btnChkNone" type="button" value="全不选" />
    <input id="btnChkReverse" type="button" value="反选" />
    <input id="btnSubmit" type="button" value="提交" />
</div>

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // 全选
        $("#btnChkAll").bind("click", function () {
            $("[name = chk]:checkbox").attr("checked", true);
        });

        // 全不选
        $("#btnChkNone").bind("click", function () {
            $("[name = chk]:checkbox").attr("checked", false);
        });

        // 反选
        $("#btnChkReverse").bind("click", function () {
            $("[name = chk]:checkbox").each(function () {
                $(this).attr("checked", !$(this).attr("checked"));
            });
        });

        // 全不选
        $("#btnSubmit").bind("click", function () {
            var result = new Array();
            $("[name = chk]:checkbox").each(function () {
                if ($(this).is(":checked")) {
                    result.push($(this).attr("value"));
                }
            });
            console.log(result.join(","));
        });
    });
</script>