當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
jquery实现全选、取消反选、加JavaScript三元运算（三种法法实现反选）
生活随笔
收集整理的這篇文章主要介紹了
jquery实现全选、取消反选、加JavaScript三元运算（三种法法实现反选）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <input type="button" value="全選" οnclick="checkAll()">
10 <input type="button" value="取消" οnclick="cancelAll()">
11 <input type="button" value="反選" οnclick="reverseAll()">
12 <table border="1" >
13 <thead>
14 <tr>
15 <td>選擇</td>
16 <td>IP</td>
17 <td>端口</td>
18 </tr>
19 </thead>
20 <tbody id="tb">
21 <tr>
22 <td><input type="checkbox"></td>
23 <td>192.168.1.1</td>
24 <td>8080</td>
25 </tr>
26 <tr>
27 <td><input type="checkbox"></td>
28 <td>192.168.1.1</td>
29 <td>8080</td>
30 </tr>
31 <tr>
32 <td><input type="checkbox"></td>
33 <td>192.168.1.1</td>
34 <td>8080</td>
35 </tr>
36 </tbody>
37 </table>
38 <!--引入jquery-->
39 <script src ='jquery-1.12.4.js'></script>
40 <script>
41 // 全選
42 function checkAll() {
43 $('#tb :checkbox').prop('checked',true);//將id是tb的下面的所有的checkbox的值設(shè)置為true,porp是列出所有元素
44 }
45 // 取消
46 function cancelAll() {
47 $('#tb :checkbox').prop('checked',false);//將id是tb的下面的所有的checkbox的值設(shè)置為false
48 }
49 // 反選
50 function reverseAll() {
51 $('#tb :checkbox').each(function () {
52 // this代指當前循環(huán)的每一個元素
53 // 反選
54 // console.log(this);
55 // console.log($(this));
56
57 //Dom來實現(xiàn)
58 // if(this.checked){
59 // this.checked = false;
60 // }else{
61 // this.checked = true;
62 // }
63
64 //jQuery來實現(xiàn)
65 // prop：
66 // prop('checked')查看是否被選定
67 // prop('checked',false)將值設(shè)置為false
68 //
69
70
71 // if($(this).prop('checked')){
72 // $(this).prop('checked',false);
73 // }else {
74 // $(this).prop('checked',true);
75 // }
76
77 // 三元運算來實現(xiàn)
78 // v = 條件？真值：假值
79 // var v = $(this).prop('checked')?false:true;
80 // $(this).prop('checked',v);設(shè)置值
81 // 也可以寫成下面這種
82 $(this).prop('checked')?$(this).prop('checked',false):$(this).prop('checked',true);
83
84
85 })
86 }
87 </script>
88
89 </body>
90 </html>
知識點:
prop()方法設(shè)置或返回被選元素的屬性和值
當該方法用于返回屬性值時，則返回第一個匹配元素的值。
當該方法用于設(shè)置屬性值時，則為匹配元素集合設(shè)置一個或多個屬性/值對
each（）方法規(guī)定為每個匹配元素規(guī)定運行的函數(shù)。用法each(function(){})
效果如下圖:
?
轉(zhuǎn)載于:https://www.cnblogs.com/topzhao/p/9206624.html
總結(jié)
以上是生活随笔為你收集整理的jquery实现全选、取消反选、加JavaScript三元运算（三种法法实现反选）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 上市为公司带来的只有好处吗?公司管理层还
- 下一篇： 工银生肖信用卡可以取现吗