全选反选

it2025-06-11 22

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> //css样式 <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: #ff3040; 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="j_cbAll" /> </th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> <input type="button" value=" 反选 " id="btn"> </div> <script> // 先定义 var j_cbAll = document.getElementById('j_cbAll') var j_tb = document.getElementById('j_tb') var inputs = j_tb.getElementsByTagName('input') var btn = document.getElementById('btn') //全选按钮找到全选按钮并注册点击事件，让下面input框的选中状态等于全选按钮的选中状态 j_cbAll.onclick = function() { for (var i = 0; i < inputs.length; i++) { inputs[i].checked = j_cbAll.checked } } //判断，如果四个按钮全部选中则全选按钮选中，否则全选按钮不选中 //给每一个input 注册点击事件 for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = function() { //注意每一个input input[i] //为了找到每一个input 判断是否勾选 var isAllchecked = true // for (var i = 0; i < inputs.length; i++) { if (!inputs[i].checked) { isAllchecked = false } } j_cbAll.checked = isAllchecked } } //反选按钮 btn.onclick = function() { for (var i = 0; i < inputs.length; i++) { inputs[i].checked = !inputs[i].checked //排他 } // 判断全选按钮的状态 var isAllchecked = true for (var i = 0; i < inputs.length; i++) { if (!inputs[i].checked) { isAllchecked = false } } j_cbAll.checked = isAllchecked } </script> </body> </html>

最新回复(0)