js 实现全选/全不选效果
代码如下:
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>全选</title> </head> <body> <!--html中两个单词连接用-分隔 --> <input type="checkbox" id="check-all" onclick="switchItem();"><br> <input type="checkbox" class="check-item"><br> <input type="checkbox" class="check-item"><br> <input type="checkbox" class="check-item"><br> <input type="checkbox" class="check-item"><br> <input type="checkbox" class="check-item"><br> <input type="checkbox" class="check-item"><br> <input type="checkbox" class="check-item"><br> <script> //1.找到全选框的状态 //2.把其他多选框设置成全选框的状态 function switchItem() { var checkAll = document.getElementById('check-all'); var items = document.getElementsByClassName('check-item'); //因为是多个多选框,所以需要遍历,不需要下标,可以用forof循环 for (var item of items){ item.checked = checkAll.checked ; } } </script> </body> </html>