一、实现方法一：
①效果图
②知识点：
1、这里使用了 getElementsByName 函数，主要是因为 input的标识符就是通过name来设定的，又因为是对多个
这样的元素进行设置样式的话，就要在element后面加上复数的s了
2、用于点击一下变成全选的，再点击一下就全部取消了，所以就是一个布尔类型的
故点击一下的话，就用
checkAll=!checkAll;
③完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var checkAll=false; function allcheck(){ checkAll=!checkAll; let inputs = document.getElementsByName('checkbox'); for(var i=0;i<inputs.length;i++) inputs[i].checked=checkAll; } </script> </head> <body> 看书：<input type="checkbox" name="checkbox" value="1"><br> 聊天：<input type="checkbox" name="checkbox" value="2"><br> 打码：<input type="checkbox" name="checkbox" value="3"><br> 看剧：<input type="checkbox" name="checkbox" value="4"><br> <button onclick="allcheck()">全选/取消</button> </body> </html>
二、实现方法二（它吧全选和取消按钮分开了，并且添加了一个alert来让人确定）
①效果图
②知识点：
1、这个就是给点击事件的函数传入的是input的name
<button onclick="checkboxed('checkbox')">全选</button>
<button onclick="uncheckboxed('checkbox')">取消全选</button>
2、如果要全选的话，就吧全部的checkbox属性的input.checked="checked" 或则就是=“”，表示空
objNameList[i].checked="checked"; 全选
objNameList[i].checked=""; 取消全选
三、JavaScript 复选框实现全选、取消全选 、反选实例：
①效果图：
②知识点：
1、在html中同时给点击事件的函数，复选框的name 和 type=全选/取消全选/反选
2、就是如果本身就是选中的了，那么点击“全选框”是没用的，而点击“取消全选”和“反选”就会让它变成没选中的
如果本身是没选中的，同理的
===就是利用了这样的逻辑关系来实现的
③完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function opcheckedboxed(objName,type){ var objNameList=document.getElementsByName(objName); if(null!=objNameList){ for(var i=0;i<objNameList.length;i++){ if(objNameList[i].checked==true) {if(type!='checkall') objNameList[i].checked=false; } else{ if(type!='uncheckall'){ objNameList[i].checked=true; } } } } } </script> </head> <body> 看书：<input type="checkbox" name="checkbox" value="1"><br> 聊天：<input type="checkbox" name="checkbox" value="2"><br> 打码：<input type="checkbox" name="checkbox" value="3"><br> 看剧：<input type="checkbox" name="checkbox" value="4"><br> <button onclick="opcheckedboxed('checkbox','checkall')">全选</button> <button onclick="opcheckedboxed('checkbox','uncheckall')">取消全选</button> <button onclick="opcheckedboxed('checkbox','reversecheck')">反选</button> </body> </html>