全选与反选在表单类的项目中还是很常见的，电商项目中的购物车一定少不了这个功能。
下面我只就用一个简单的案例做个演示吧。
<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>
上面就是这个案例的效果了。
当然，这个还可以扩展一下，做成一个购物车的案例。
更多专业前端知识，请上 【猿2048】www.mk2048.com
