JQuery 中 实现复选框全选全不选反选功能 案例

xiaoxiao2021-02-28  86

<!DOCTYPE html> <html> <head>     <title></title>     <meta charset="UTF-8">     <script src="jq183.js"></script>//引入JQuery代码库 </head> <body> <input type="button" value="全选" id="all"> <input type="button" value="全不选" id="unall"> <input type="button" value="反选" id="un"> <hr> <input type="checkbox" value=""> HTML  <br> <input type="checkbox" value=""> Javascript <br> <input type="checkbox" value=""> PHP <br> <input type="checkbox" value=""> Python <br> <input type="checkbox" value=""> Java <br> <input type="checkbox" value=""> C/C++ <br> </body> <script>     $.fn.extend({         //全选 将所有的 CheckBox的checked 属性 都为true         all:function(){             this.attr('checked',true)         },         //全不选 将所有的checked 属性值都变成false         unall:function(){             this.attr('checked',false)         },         //反选 将所有的checked属性值取反         un:function(){             for(var i=0;i<this.length;i++){                 this[i].checked=!this[i].checked;             }         }     })     $('#all').click(function(){         $(':checkbox').all();     })     $('#unall').click(function(){         $(':checkbox').unall();     })     $('#un').click(function(){         $(':checkbox').each(function(){             //判断并取反             if(this.checked==true){                 this.checked=false;             }else{                 this.checked=true;             }             //直接取反            // this.checked=!this.checked;         })     }) </script> </html>
转载请注明原文地址: https://www.6miu.com/read-38285.html

最新回复(0)