js\Jquery实现全选/反选等功能

最新推荐文章于 2024-04-02 19:39:43 发布

it界小哥

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量442

点赞数 2

文章标签： js 全选反选 javascript

本文链接：https://blog.csdn.net/TRQ809135642/article/details/72356781

版权

这是我手写的js代码，大家直接复制就可以
   <br/>
   <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
   <br/>
       <input type="checkbox" name="items" id="zq" />足球
       <input type="checkbox" name="items" id="lq"/>篮球
       <input type="checkbox" name="items" id="pq"/>排球
       <input type="checkbox" name="items" id="bq"/>棒球
       <br/>
   <input type="button" name="checkAll" id="check_all" value="全选"/>
   <input type="button" name="checkAll" id="check_allNo" value="全不选"/>
   <input type="button" name="checkAll" id="check_and" value="反选"/>

<script type="text/javascript">

       //全选
       var items=document.getElementsByName("items");
       document.getElementById("check_all").οnclick=function(){
               for(var i=0;i<items.length;i++){
                   var item=items[i];
                   //ie支持，火狐不支持
                   //item.setAttribute("checked","checked");
                   item.checked="checked";
                   }
           }
       //全不选
       document.getElementById("check_allNo").οnclick=function(){
           for(var i=0;i<items.length;i++){
                   var item=items[i];
                   //item.setAttribute("checked",null);
                   item.checked=null;
               }
           }

       //全选/全不选
       /* document.getElementById("checkItems").οnclick=function(){
               for(var i=0;i<items.length;i++){
                   var item=items[i];
                   if(this.checked){
                       item.checked="checked";
                   }else{
                   item.checked=null;
                       }
               }
           } */
       //第二种方法
       document.getElementById("checkItems").οnclick=function(){
           for(var i=0;i<items.length;i++){
               items[i].checked=this.checked;
           }
       }
       //反选
       document.getElementById("check_and").οnclick=function(){
           for(var i=0;i<items.length;i++){
               if(items[i].checked){
                   items[i].checked=null;
               }else{
                   items[i].checked="checked";
               }
           }

}

//Jquery实现

//全选

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

$("input[name=items]").attr("checked","checked");

});

//全不选

$("#check_allNo").click(function(){

$("input[name=items]").attr("checked",null);

});

//反选

$("#check_and").click(function(){

    $("input[name=items]").each(function(index,domEle){

        if(this.checked){

            $(this).attr("checked",null);
        }else{
           $(this).attr("checked","checked");
        }
     });

});

//全选/全不选

$("#checkItems").click(function(){
   if(this.checked){
       $("input[name=items]").attr("checked","checked");
   }else{
       $("input[name=items]").attr("checked",null);
   }
});

</script>