全選與反選在表單類的項目中還是很常見的，電商項目中的購物車一定少不了這個功能。

下面我只就用一個簡單的案例做個演示吧。

<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

總結

以上是生活随笔為你收集整理的DOM操作案例之--全选与反选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。