<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="CheckAll()"/> <input type="button" value="反选" onclick="reverseAll()"/> <input type="button" value="取消" onclick="CancleAll()"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> <tbody> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery.js"></script> <script> <!--全选--> function CheckAll() { $(':checkbox').prop('checked',true); } //取消 function CancleAll() { $(':checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function () { // this指当前循环的每一个元素,this是DOM对象 // DOM实现反选 // if (this.checked){ // this.checked =false; // }else { // this.checked = true ; // } // jQuery实现反选 // // if ($(this).prop('checked')){ // $(this).prop('checked',false); // }else { // $(this).prop('checked',true); // } // 三元运算实现反选 // var v = 条件?真值:假值 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
注释：
-选择权
-
-$(':checkbox').prop('checked');获取值
-$(':checkbox').prop('checked',true);设置值
-
jQuery方法内置循环:(':checkbox').xxxx
- $(':checkbox').prop('checked').each(function(){
//this ,DOM,当前循环的元素$(this)
})
- var v = 条件 ?真值:假值