<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style type="text/css"> button{ margin-top: 10px; } </style> <body> <h2>你最喜欢的美食：</h2> <table id="table"> </table> <button id="chooseall" onclick="che_all()">全选</button> <button id="check" onclick="unchk()">反选</button> <button id="none" onclick="che_none()">取消</button> <script type="text/javascript"> var table =document.getElementById('table'); var chooseall =document.getElementById('chooseall'); var check =document.getElementById('check'); var none =document.getElementById('none'); var foods =['西湖醋鱼','龙井虾仁','桂花莲藕','烧汁茄子','一品豆腐','香菇炖鸡','清汤鱼圆']; //使用input循环插入组件 for (var i = 0; i < foods.length; i++) { table.innerHTML+='<td><input type="checkbox" name="checkname" οnclick="chk()"/>'+foods[i]+'</td>'; } //全选 function che_all() { var chen=document.getElementsByName('checkname'); for (var i = 0; i < chen.length; i++) { chen[i].checked=true; } document.getElementById('chooseall').checked=true; } //取消 function che_none() { var chen=document.getElementsByName('checkname'); for (var i = 0; i < chen.length; i++) { chen[i].checked=false; } document.getElementById('chooseall').checked=false; } //反选 function unchk() { var chen = document.getElementsByName("checkname"); var times =0; for (var i = 0; i < chen.length; i++) { if (chen[i].checked) { chen[i].checked = false; } else { chen[i].checked = true; times++; } if(times==chen.length){ document.getElementById("chooseall").checked=true; }else { document.getElementById("chooseall").checked=false; } } } //子复选框全部选中，全选框也自动选中 function chk() { var chen = document.getElementsByName("checkname"); var times = 0; for (var i = 0; i < chen.length; i++) { if (chen[i].checked) { times++; } } if (times == chen.length) { /* status=true; 是给status赋值，并没有改变标签*/ document.getElementById("chooseall").checked = true; } else { document.getElementById("chooseall").checked = false; } //如果有一个没有选，全选框也不选 if (times == 0) { document.getElementById("chooseall").checked = false; } } </script> </body> </html>
代码参照： 这个很棒写的！👇 (https://blog.csdn.net/longmo8/article/details/107061920?utm_medium=distribute.pc_relevant.none-task-blog-title-5&spm=1001.2101.3001.4242)
