<body>
? ? <p><input type="checkbox" id="ckAll">全選</p>
? ? <p><input type="checkbox" class="ck">北京</p>
? ? <p><input type="checkbox" class="ck">上海</p>
? ? <p><input type="checkbox" class="ck">廣州</p>
? ? <p><input type="checkbox" class="ck">深圳</p>
? ? <script>
? ? ? ? // 獲取全選復(fù)選框
? ? ? ? let ckAll = document.querySelector('#ckAll')
? ? ? ? // 獲取全部的復(fù)選框
? ? ? ? let cks = document.querySelectorAll('.ck')
? ? ? ? // console.log(ckAll);
? ? ? ? // console.log(cks);
? ? ? ? // 給全選復(fù)選框注冊(cè)點(diǎn)擊事件
? ? ? ? ckAll.onclick = function() {
? ? ? ? ? ? // Checked返回值為boolean型
? ? ? ? ? ? // console.log(ckAll.Checked);
? ? ? ? ? ? // 遍歷所有的復(fù)選框
? ? ? ? ? ? cks.forEach((ck, index) => {
? ? ? ? ? ? ? ? // console.log(ck ,index);
? ? ? ? ? ? ? ? // 將全選復(fù)選框的狀態(tài)給所有的其它復(fù)選框
? ? ? ? ? ? ? ? ck.checked = ckAll.checked
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? // 給其它的復(fù)選框也注冊(cè)點(diǎn)擊事件
? ? ? ? cks.forEach(ck => {
? ? ? ? ? ? ck.onclick = function() {
? ? ? ? ? ? ? ? // 只要有一個(gè)復(fù)選框的狀態(tài)為非選中
? ? ? ? ? ? ? ? if([...cks].some(r => r.checked === false)){
? ? ? ? ? ? ? ? ? ? // ckAll變?yōu)榉沁x中狀態(tài)
? ? ? ? ? ? ? ? ? ? ckAll.checked = false
? ? ? ? ? ? ? ? // 所有復(fù)選框的狀態(tài)都為選中
? ? ? ? ? ? ? ? }else if([...cks].every(r => r.checked)){
? ? ? ? ? ? ? ? ? ? // ckAll變?yōu)檫x中狀態(tài)
? ? ? ? ? ? ? ? ? ? ckAll.checked = true
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
