特效复选框的全选全不选反选操作

Posted 2020-07-08 小仙前端博客

顾名思义。

朴素效果截图：

 

html：

<div class="con">

         <h1>复选框的全选、全不选、反选操作</h1>

   

         <div class="box">

             <h2>全选/全不选：</h2>

             <p><input type="checkbox" class="check_kid"> 选项一</p>

        <p><input type="checkbox" class="check_kid"> 选项二</p>

        <p><input type="checkbox" class="check_kid"> 选项三</p>

        <p><input type="checkbox" class="check_kid"> 选项四</p>

        <p><input type="checkbox" class="check_all"> 全选/全不选</p>                       

    </div>

   

    <div class="box">

             <h2>反选：</h2>

             <p><input type="checkbox" class="check_kid_2"> 选项一</p>

        <p><input type="checkbox" class="check_kid_2"> 选项二</p>

        <p><input type="checkbox" class="check_kid_2"> 选项三</p>

        <p><input type="checkbox" class="check_kid_2"> 选项四</p>

        <p><input type="button" value="反选" class="check_other"></p>                      

    </div>

   

    <div class="box">

             <h2>一行有多个：</h2>

             <table class="check_table">

                 <tr>

                     <td><input type="checkbox" class="check_line" name="check_1"> 全选1行</td>

                <td><input type="checkbox" class="check_one" name="check_1"> 选项11</td>

                <td><input type="checkbox" class="check_one" name="check_1"> 选项12</td>

                <td><input type="checkbox" class="check_one" name="check_1"> 选项13</td>

            </tr>

            <tr>

                     <td><input type="checkbox" class="check_line" name="check_1"> 全选2行</td>

                <td><input type="checkbox" class="check_one" name="check_1"> 选项21</td>

                <td><input type="checkbox" class="check_one" name="check_1"> 选项22</td>

                <td><input type="checkbox" class="check_one" name="check_1"> 选项23</td>

            </tr>

            <tr>

                     <td colspan="4"><input type="checkbox" class="check_all_2"> 全选/全不选</td>

            </tr>

        </table>                               

    </div>

    <br><br><br> 

</div>

 

css：

.con{ width:1000px; margin:0 auto;}

.con h1{ text-align:center; font-weight:normal;}

h1,h2{ font-weight:normal; color:#0CC;}

ul{ margin:0; padding:0; list-style:none;}

 

.box{ border:1px solid #0C9; padding:20px; margin:20px;}

.check_table{ width:100%; border-collapse:collapse; border-spacing:0;}

.check_table td{ border:1px solid #ccc; height:50px; padding:0 10px;}

 

js：

$(document).ready(function(){

        

//单一控制全选

         $(".check_kid").click(function(){

                   var num1=$(".check_kid").length;

                   var num2=$(".check_kid:checked").length;                               

                   if(num1==num2)               

                    {

                            $(".check_all").prop("checked",true);

                            }

                   else{

                            $(".check_all").prop("checked",false);

                            }       

                   });

                           

         $(".check_all").click(function(){                

                   $(".check_kid").prop("checked",this.checked);                                           

                   });    

                  

//反选              

         $(".check_other").click(function(){

                   $(".check_kid_2").each(function(){

                            this.checked=!this.checked;

                            });

                   });    

                  

//控制本行              

         $(".check_one").click(function(){

                   var check_tr=$(this).closest("tr");

                   var num11=$(".check_one",check_tr).length;

                   var num22=$(".check_one:checked",check_tr).length;         

                   var check_line=$(this).parents(\'tr\').find(".check_line");                  

                   if(num11==num22){

                            check_line.prop("checked",true);

                            }

                   else{

                            check_line.prop("checked",false);

                            }       

                   });    

                           

         $(".check_line").click(function(){

                    check_one=$(this).parents(\'tr\').find(".check_one");   

                    check_one.prop("checked",this.checked);  

                    });

                    

//控制所有

         $("[name=\'check_1\']").click(function(){

                   var num111=$("[name=\'check_1\']").length;

                   var num222=$("[name=\'check_1\']:checked").length;             

                   if(num111==num222){

                            $(".check_all_2").prop("checked",true);                           

                            }                

                   else{

                            $(".check_all_2").prop("checked",false);                          

                            }

                   });    

                           

         $(".check_all_2").click(function(){           

                   $("[name=\'check_1\']").prop("checked",this.checked);                                       

                   });                       

                           

}); 

 

效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2855.htm

源码下载：http://pan.baidu.com/s/1kUIG8cB