JS——全选与全不选
Posted 站错队了同志
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS——全选与全不选相关的知识,希望对你有一定的参考价值。
1、每个子input标签都需要进行判断
2、使用开闭原则,一旦满足条件就改变默认值
3、在给主input标签注册事件时,要求主input标签的checked值赋值给子标签
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="theadInp" /> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="tbody"> <tr> <td> <input type="checkbox" /> </td> <td>地三鲜</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>西红柿鸡蛋</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>醋溜土豆丝</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>萝卜干炒黄豆儿</td> <td>田老师</td> </tr> </tbody> </table> </div> <script> var inp = document.getElementById("theadInp"); var tbody = document.getElementById("tbody"); var inps = tbody.getElementsByTagName("input"); //给表头的input标签注册事件 inp.onclick = function () { for (var i = 0; i < inps.length; i++) { inps[i].checked = this.checked; } } //给tbody中的input标签注册事件 for (var i = 0; i < inps.length; i++) { inps[i].onclick = function () { var bool = true; for (var i = 0; i < inps.length; i++) { if (inps[i].checked === false) { bool = false; } } inp.checked = bool; } } </script> </body> </html>
以上是关于JS——全选与全不选的主要内容,如果未能解决你的问题,请参考以下文章