<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border> <tr> <th><input type="checkbox" class="checkbox">全选</th> <th>商品</th> <th>商家</th> <th>价格</th> </tr> <tr> <td><input type="checkbox" class="ck"></td> <td>小米手机</td> <td>小米</td> <td>$5999</td> </tr> <tr> <td><input type="checkbox" class="ck"></td> <td>小米手机</td> <td>小米</td> <td>$5999</td> </tr> <tr> <td><input type="checkbox" class="ck"></td> <td>小米手机</td> <td>小米</td> <td>$5999</td> </tr> </table> <script> //获取全选框 const checkbox = document.querySelector(".checkbox") //检查是否获取成功 console.log(checkbox) //获取所有的多选框 const cks = document.querySelectorAll(".ck") //检查是否获取成功 console.log(cks) //1. 循环所有的多选框 for(let i=0;i<cks.length;i++){ //给全选框添加点击事件 checkbox.addEventListener('click',function(){ //表示，全选框的状态等于所有多选框的状态，当点击全选框的时候，全选框的状态是为true,只有为true的情况下，才会被选中 cks[i].checked = checkbox.checked }) } //以下是用来判断，当所有全选框都被选中时，全选框才为true for(let i=0;i<cks.length;i++){ //给所有的多选框添加点击事件 cks[i].addEventListener('click',function(){ // .ck:checked 选择框的伪类选择器 => 在这里表示被选中 //方法一: checkbox.checked = document.querySelectorAll(".ck:checked").length === cks.length //当选中多选框的数量等于原本多选框有多少个数量时执行下一步 //方法二： if (document.querySelectorAll(".ck:checked").length === cks.length){ checkbox.checked = true }else{ checkbox.checked =false } }) } </script> </body> </html> 标签：checkbox,checked,javascript,length,点击,事件,document,小米,选框 From： https://www.cnblogs.com/tokou/p/17922750.html