JavaScript實(shí)現(xiàn)復(fù)選框全選功能
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)復(fù)選框全選的具體代碼,供大家參考,具體內(nèi)容如下
代碼:
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style>table { width: 300px; border-spacing: 0; /* text-align: center; */ margin: 100px auto; border-collapse: collapse;}table tr:nth-child(n+2)>td { text-align: left; background-color: rgb(250, 245, 245); color: dimgray; font-size: 14px;}table tr:nth-child(1) { background-color: skyblue; color: white;}th,td { padding: 10px; border: 0.5px solid gray;} </style></head><body> <table><tr> <th><input type='checkbox' name='' id='all'></th> <th>商品</th> <th>價(jià)格</th></tr><tr> <td><input type='checkbox' name='' id='ip8'></td> <td>iPhone8</td> <td>8000</td></tr><tr> <td><input type='checkbox' name='' id='pro'></td> <td>iPad Pro</td> <td>5000</td></tr><tr> <td><input type='checkbox' name='' id='air'></td> <td>iPad Air</td> <td>2000</td></tr><tr> <td><input type='checkbox' name='' id='watch'></td> <td>Apple Watch</td> <td>2000</td></tr> </table> <script>var all = document.getElementById(’all’);var items = document.querySelectorAll(’tr>td>input’);all.onclick = function() { for (var i = 0; i < items.length; i++) {items[i].checked = this.checked; }}for (var i = 0; i < items.length; i++) { items[i].onclick = function() {var flag_all = 1;for (var j = 0; j < items.length; j++) { if (items[j].checked == 0) {flag_all = 0;all.checked = flag_all;break; }}all.checked = flag_all; }} </script></body></html>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法2. idea配置jdk的操作方法3. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)4. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法5. python 浮點(diǎn)數(shù)四舍五入需要注意的地方6. Springboot 全局日期格式化處理的實(shí)現(xiàn)7. VMware中如何安裝Ubuntu8. Docker容器如何更新打包并上傳到阿里云9. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題10. JAMon(Java Application Monitor)備忘記
