js_复选框单选与复选
更新时间：2020-09-16 03:37:46 来源： 阅读量：
【摘要】 js_复选框单选与复选考必过小编为大家整理了关于js_复选框单选与复选的信息，希望可以帮助到大家！
js_复选框单选与复选
标签：colorastyleflagnbspforwidthpoiclass
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8" />
5 <title></title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11
12 .wrap {
13 width: 300px;
14 margin: 100px auto 0;
15 }
16
17 table {
18 border-collapse: collapse;
19 border-spacing: 0;
20 border: 1px sopd #c0c0c0;
21 width: 300px;
22 }
23
24 th,
25 td {
26 border: 1px sopd #d0d0d0;
27 color: #404060;
28 padding: 10px;
29 }
30
31 th {
32 background-color: #09c;
33 font: bold 16px ‘微软雅黑‘;
34 color: #fff;
35 }
36
37 td {
38 font: 14px ‘微软雅黑‘;
39 }
40
41 tbody tr {
42 background-color: #f0f0f0;
43 }
44
45 tbody tr:hover {
46 cursor: pointer;
47 background-color: #fafafa;
48 }
49 </style>
50 </head>
51
52 <body>
53 <p class="wrap">
54 <table>
55 <thead>
56 <tr>
57 <th>
58 <input type="checkbox" id="th" />
59 </th>
60 <th>商品</th>
61 <th>价钱</th>
62 </tr>
63 </thead>
64 <tbody id="tb">
65 <tr>
66 <td>
67 <input type="checkbox" />
68 </td>
69 <td>iPhone8</td>
70 <td>8000</td>
71 </tr>
72 <tr>
73 <td>
74 <input type="checkbox" />
75 </td>
76 <td>iPad Pro</td>
77 <td>5000</td>
78 </tr>
79 <tr>
80 <td>
81 <input type="checkbox" />
82 </td>
83 <td>iPad Air</td>
84 <td>2000</td>
85 </tr>
86 <tr>
87 <td>
88 <input type="checkbox" />
89 </td>
90 <td>Apple Watch</td>
91 <td>2000</td>
92 </tr>
93 </tbody>
94 </table>
95 </p>
96 <script>
97 var th = document.querySelector(‘#th‘)
98 var tb = document.querySelector(‘#tb‘).querySelectorAll(‘input‘)
99 th.oncpck = function () {
100 //循环给每个tr里面的input的checked属性赋值
101 for (var i = 0; i < tb.length; i++) {
102 tb[i].checked = this.checked
103 }
104 }
105 //循环给每个下面的复选框一个点击事件
106 for (var i = 0; i < tb.length; i++) {
107 tb[i].oncpck = function () {
108 //定义一个变量，用来判断每个input的checked是否选中，如果选中，就true，如果有一个没选中，就为false
109 var flag = true
110 //循环判断每个input的checked属性
111 for (var i = 0; i < tb.length; i++) {
112 if (!tb[i].checked) {
113 //如果没选中，就将flag的值改为false
114 flag = false
115 //只要有一个为false，就结束循环
116 break
117 }
118 }
119 //最后将flag的值赋给总的复选框
120 th.checked = flag
121 }
122 }
123 </script>
124 </body>
125 </html>
js_复选框单选与复选
标签：colorastyleflagnbspforwidthpoiclass
以上就是js_复选框单选与复选的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！