用jquery来实现正反选选择框checkbox的小示例 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-3.2.1.js"></script>
 7 </head>
 8 <body>
 9     <button onclick="changeall()">正选</button>
10     <button onclick="reverse()">反选</button>
11     <button onclick="cancel()">取消</button>
12 
13     <table border="5">
14         <tr>
15             <td>111</td>
16             <td><input type="checkbox" class="box"></td>
17         </tr>
18         <tr>
19             <td>222</td>
20             <td ><input type="checkbox" class="box"></td>
21         </tr>
22         <tr>
23             <td>333</td>
24             <td><input type="checkbox" class="box"></td>
25         </tr>
26         <tr>
27             <td>444</td>
28             <td ><input type="checkbox" class="box"></td>
29         </tr>
30     </table>
31 <script>
32     function changeall() {
33         $("table input").each(function () {                   //找到input标签后进行遍历 把所有的input都加上checked 选中状态
34             $(this).prop("checked",true);
35             
36         })
37     }
38     function cancel() {                                       //找到input标签后进行遍历 把所有的input都取消checked状态
39         $("table input").each(function () {
40             $(this).prop("checked",false);
41         })
42     }
43     function reverse() {
44         $("table input").each(function () {                    //遍历循环input 
45             if ($(this).prop("checked")){                       // 如果有checked 
46                 $(this).prop("checked",false);                 // 用false取消
47             }
48             else {                                             //如果没有
49                 ($(this).prop("checked", true));               //加上checked状态
50             }
51         })
52     }
53 </script>
54 </body>
55 </html>

 

posted @ 2017-12-15 10:48  归来仍是少年！  阅读(671)  评论(0)    收藏  举报