jquery全选 反选全不选效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 全选 $('#qx').click(function(){ // 找到所有的复选框,加上checked属性,属性值为真true 选择表单元素的要用冒号 :checkbox // checked属性,值为true选中 $('#ta :checkbox').prop('checked',true) }) // 全不选 $('#qbx').click(function(){ // 找到所有的复选框,加上checked属性,属性值为false 选择表单元素的要用冒号 :checkbox // checked属性,值为false不选中 // (1)可以这样选 // $('#ta :checkbox').prop('checked',false); // (2)可以这样选 removeProp是将class里面的值清空 $('#ta :checkbox').removeProp('checked'); }) // 反选(1)第一种方法 // $('#fx').click(function(){ //// 获得现在处在选中状态下的元素 // var ee = $('#ta :checked'); //// 全选 // $('#ta :checkbox').prop('checked',true) //// 将刚才处在被选中状态的元素取消选中状态 // ee.removeProp('checked'); // }) // 反选(2)第二种方法 $('#fx').click(function(){ // 每处理一个复选框就会执行一下这个function // i当前这个元素的序号,val指的是当前这个属性的属性值 $('#ta :checkbox').prop('checked',function(i,val){ // 返回一个!val 相反的val 比如属性值是true 相反的就是false; return !val; }) }) }) </script> </head> <body> <input type="button" name="" id="qbx" value="全不选按钮" /> <input type="button" name="" id="qx" value="全选按钮" /> <input type="button" name="" id="fx" value="反选按钮" /> <table id="ta"> <tr> <td><input type="checkbox" /></td> <td>电视剧01</td> </tr> <tr> <td><input type="checkbox" /></td> <td>电视剧02</td> </tr> <tr> <td><input type="checkbox" /></td> <td>电视剧03</td> </tr> <tr> <td><input type="checkbox" /></td> <td>电视剧04</td> </tr> <tr> <td><input type="checkbox" /></td> <td>电视剧05</td> </tr> </table> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知