全选与反选在表单类的项目中还是很常见的，电商项目中的购物车一定少不了这个功能。
下面我只就用一个简单的案例做个演示吧。
<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>小米手机</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>ThinkPad</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>iPhone7</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>iPhoneX</td> <td>9000</td> </tr> </tbody> </table>
上面是是HTML部分代码，做了一个表格。
下面是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: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style>
下面是js代码，实现全选反选功能。
<script>
var all = document.getElementById("j_cbAll");
var tbody = document.getElementById("j_tb");
var checkboxes = tbody.getElementsByTagName("input");//下面的单选框
//点击all 让下面的的选中状态和all一致
all.onclick = function () {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = all.checked;
}
};
//让下面的影响上面
//点击每一个都判断 如果每一个都选中了 all就选中 否则不选中
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function () {
var isCheckedAll = true;
for (var i = 0; i < checkboxes.length; i++) {
if (!checkboxes[i].checked) {
isCheckedAll = false;
break;
}
}
all.checked = isCheckedAll;
};
}
</script>
上面就是这个案例的效果了。
当然，这个还可以扩展一下，做成一个购物车的案例。
