实现效果
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面；
2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示；
3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；
实现思路
1、获取所勾选的值组成的数组
定义一个数组checkValues，存放用户所勾选的内容。
再定义一个函数
getValues()
，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用
innerText
属性将数组展示到页面中。
捕获选框的
onclick
点击事件，当用户点击时，执行
getValues()
。
// 显示选择内容的文字var checkText = document.getElementById("check_text");// 定义选择内容的数组var checkValues =[];// 根据复选框组勾选状态，获取当前已选择的值并渲染至页面functiongetValues(){// 数组置空
checkValues=[];// 依次检查是否勾选，将勾选的内容放进数据for(var i =0; i < checks.length; i++){if(checks[i].checked){
checkValues.push(checks[i].value);}}// 将选择的数组中的内容渲染至页面
checkText.innerText =JSON.stringify(checkValues);
checkText.style.color ="#09f"}
2、更新全选框状态及文字显示
定义一个判断是否全选的函数
isCheckAll()
，遍历选框数组checks，如果全部被选择，返回true，否则返回false。
捕获选框的
click
点击事件，当用户点击时，判断
isCheckAll()
的值，若为真，勾上全选框，并且更新提示文字；若为假，不勾选全选框，文字也为默认的“全选”。
// 全选input勾选框var checkAll = document.getElementById("checkAll");// 检查列表复选框是否全部勾选functionisCheckAll(){for(var i =0; i < checks.length; i++){if(!checks[i].checked){returnfalse;}}returntrue;}// 根据全选框状态改变文字functionchangeText(){// 如果全选框是勾选的状态，提示文字变为“全不选”if(checkAll.checked){
document.querySelector("dl>dt>label").innerHTML ="全不选";}else{
document.querySelector("dl>dt>label").innerHTML ="全选";}}
3、反选
当反选按钮被点击时，遍历复选框，将选择状态全部置反，然后判断状态是否为全选
// 点击“反选”，所有复选框状态取反
ReverseCheck.onclick=function(){for(var i =0; i < checks.length; i++){
checks[i].checked =!checks[i].checked;}// 若点击反选时，全选框为选中状态，则取消选中if(checkAll.checked){
checkAll.checked =false;}// 模拟列表点击事件，若反选后，复选框全部选中，则选中全选框，更改文字
dd.click();}
完整代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>复选框（checkbox）全选/全不选/反选</title><style>body,
dl,
dt,
dd,
p{margin: 0;padding: 0;}body{font-family: Tahoma;font-size: 12px;}label,
input,
a{vertical-align: middle;}label{padding: 0 10px 0 5px;}a{color: #09f;text-decoration: none;}a:hover{color: red;}dl{width: 120px;margin: 10px auto;padding: 10px 5px;border: 1px solid #666;border-radius: 5px;background: #fafafa;}dt{padding-bottom: 10px;border-bottom: 1px solid #666;}dt label{font-weight: 700;}p{text-align: center;}dd > p{margin-top: 10px;text-align: left;}</style></head><body><dl><dt><inputtype="checkbox"id="checkAll"/><label>全选</label><ahref="javascript:;">反选</a></dt><dd><p><inputtype="checkbox"name="item"value="one"/><label>one</label></p><p><inputtype="checkbox"name="item"value="two"/><label>two</label></p><p><inputtype="checkbox"name="item"value="three"/><label>three</label></p><p><inputtype="checkbox"name="item"value="four"/><label>four</label></p><p><inputtype="checkbox"name="item"value="five"/><label>five</label></p><p><inputtype="checkbox"name="item"value="six"/><label>six</label></p><p><inputtype="checkbox"name="item"value="seven"/><label>seven</label></p><p><inputtype="checkbox"name="item"value="eight"/><label>eight</label></p><p><inputtype="checkbox"name="item"value="nine"/><label>nine</label></p><p><inputtype="checkbox"name="item"value="ten"/><label>ten</label></p></dd></dl><p>您所选择的内容包括：<spanid="check_text"></span></p><br><p>
1、切换全选/全不选文字；
<br/><br/>
2、根据选中个数更新全选框状态；
</p></body><script>// 全选input勾选框var checkAll = document.getElementById("checkAll");// 复选框组var checks = document.querySelectorAll("dd > p > input");// 选择列表var dd = document.querySelector("dd");// 反选var ReverseCheck = document.querySelector("dl > dt > a")// 显示选择内容的文字var checkText = document.getElementById("check_text");// 定义选择内容的数组var checkValues =[];// 检查列表复选框是否全部勾选functionisCheckAll(){for(var i =0; i < checks.length; i++){if(!checks[i].checked){returnfalse;}}returntrue;}// 根据全选框状态改变文字functionchangeText(){// 如果全选框是勾选的状态，提示文字变为“全不选”if(checkAll.checked){
document.querySelector("dl>dt>label").innerHTML ="全不选";}else{
document.querySelector("dl>dt>label").innerHTML ="全选";}}// 根据复选框组勾选状态，获取当前已选择的值并渲染至页面functiongetValues(){// 数组置空
checkValues=[];// 依次检查是否勾选，将勾选的内容放进数据for(var i =0; i < checks.length; i++){if(checks[i].checked){
checkValues.push(checks[i].value);}}// 将选择的数组中的内容渲染至页面
checkText.innerText =JSON.stringify(checkValues);
checkText.style.color ="#09f"}// 列表被点击
dd.onclick=function(){// 检查是否已勾选所有复选框，更改全选框状态if(isCheckAll()){
checkAll.checked ="true";}else{
checkAll.checked =false;}// 根据全选框状态改变文字changeText();// 获取当前所选择的内容并渲染至页面getValues();}// 全选框被点击
checkAll.onclick=function(){// 所有复选框的状态跟全选框的状态保持一致for(var i =0; i < checks.length; i++){
checks[i].checked = checkAll.checked;}// 根据全选框状态改变文字changeText();// 获取当前所选择的内容并渲染至页面getValues();}// 点击“反选”，所有复选框状态取反
ReverseCheck.onclick=function(){for(var i =0; i < checks.length; i++){
checks[i].checked =!checks[i].checked;}// 若点击反选时，全选框为选中状态，则取消选中if(checkAll.checked){
checkAll.checked =false;}// 若反选后，复选框全部选中，则选中全选框，更改文字
dd.click();}</script></html>
本文转载自: https://blog.csdn.net/qq_40261601/article/details/129142590
版权归原作者 林二禾 所有， 如有侵权，请联系我们删除。
版权归原作者 林二禾 所有， 如有侵权，请联系我们删除。