全选，反全选，反选，获取选中的值，根据子选择控制全选按钮

HTML代码：

 1 <ul id="list">  
 2            <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
 3            <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
 4            <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
 5            <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
 6            <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
 7            <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>
 8         </ul>
 9         <input type="checkbox" id="all"><label>全选</label>
10         
11         <input type="button" value="获得选中的所有值" class="btn" id="getValue">
12         <input type="button" value="反选" class="btn" id="backselet">

js代码：

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    <script>
    //全选和反全选
        $("#all,#selectAll").on('click',function(){
            $("#list :checkbox").prop('checked',this.checked);
        });
    //获取选中的值
       $("#getValue").on('click',function(){
               var varArr = new Array;
               $("#list :checkbox[checked]").each(function(i){
                   varArr[i] = $(this).val();
               });
               var vals = varArr.join(',');
               console.log(vals);
       });
    //反选
       $("#backselet").on('click',function(){
               $("#list :checkbox").each(function(){
                   $(this).prop("checked",!this.checked);
               })
       });
    //子选框对全选框的控制
        $("#list :checkbox").on("click",function(){
            allcheck();
        })
        function allcheck(){
            var numall=$('#list :checkbox').length;
            var chk=0;
            $("#list :checkbox").each(function(){
                if($(this).prop("checked") == true){
                    chk++;
                }
            });
            if(chk==numall){
                $("#all").prop('checked',true);
            }else{
                $("#all").prop("checked",false);
            }
        }
    </script>

 

转载于:https://www.cnblogs.com/lym520/p/6433144.html