对jquery操作复选框

摘要：jquery操作复选框。使用更简洁易懂，思路清晰，逻辑更明了，很实用

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
     </head>
     <body>
         <!--给按钮加个点击事件-->
         <input type="button" value="测试" onclick="test()" />

     </body>
     <script type="text/javascript">
     <!--JS方式加事件-->
         function test()
         {
             alert("aa");
         }

     </script>
 </html>
 点测试结果如下

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
     </head>
     <body>
         <!--给按钮加个点击事件-->
         <input type="button" value="测试" onclick="test()" />
         <!--给下面的按钮加事件用jquery-->
         <input type="button" value="测试2" id="btn" />
     </body>
     <script type="text/javascript">
         function test()
         {
             alert("aa");
         }

 //        只有触发的时候执行
         $(document).ready(function(e) {
 //先找元素用$(测试2id)-用click给前面的按钮加点击事件-执行(function(){}匿名函数因为没有名字
         $("#btn").click(function(){
                 alert("第二个按钮");//点击之后要执行的函数。匿名函数
             })

         });

     </script>
 </html>

Jquery把复选框所选中的值取出来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.11.2.min.js"></script>
    </head>
    <body>

            <input type="checkbox" class="ck" value="张店" />张店
            <input type="checkbox" class="ck" value="淄川" />淄川
            <input type="checkbox" class="ck" value="周村" />周村
            <input type="checkbox" class="ck" value="临淄" />临淄
            <input type="checkbox" class="ck" value="博山" />博山

            <input type="button" value="取值" id="quck" />
            <input type="button" value="赋值" id="fuck" />

    </body>
    <script type="text/javascript">
    //复选框所选中的值取出来
        $("#quck").click(function(){
            var ck = $(".ck");
            for(var i=0;i<ck.length;i++)
            {
                //第2种写法用JS方式判断是不是选中 ck[i].checked
                if(ck.eq(i).prop("checked"))
                {
                    alert(ck.eq(i).val());
                }
            }
        })
    </script>
</html>

给周村赋值
$("#fuck").click(function(){
        var zhi = "周村";
        var ck = $(".ck");
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).val()==zhi)
            {
                ck.eq(i).prop("checked",true);
            }
        }
    })

第二种方法拼接 给周村赋值

$("#fuck").click(function(){
        var zhi = "周村";
        $("[value='"+zhi+"']").prop("checked",true);

    })

对jquery操作复选框(checkbox)的12个小技巧进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助

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、全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});

12、全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});