js_复选框单选与复选

时间:2020-09-16 03:37:44 来源:

【摘要】 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_复选框单选与复选的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
前端相关推荐 更多>>
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net