abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择/全选</title> <style> .box{ width: 120px; height: 250px; border:&nbs
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择/全选</title> <style> .box{ width: 120px; height: 250px; border: 1px solid #ccc; border-radius: 5px; padding: 5px 10px; margin: 20px auto; } .box div{ border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 8px; } .box input{ margin:8px; } </style> <script> function checkAll() { var checkall,item; checkall = document.getElementById('checkall') item = document.getElementsByName("item[]") for (var i=0; i<item.length;i++) { if(checkall.checked){ item[i].checked=true; }else{ item[i].checked=false; } } } </script> </head> <body> <div> <div> <input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">全选</label> </div> <input type="checkbox" name="item[]">选项1<br> <input type="checkbox" name="item[]">选项2<br> <input type="checkbox" name="item[]">选项3<br> <input type="checkbox" name="item[]">选项4<br> <input type="checkbox" name="item[]">选项5<br> <input type="checkbox" name="item[]">选项6<br> </div> </body> </html>
Correcting teacher:天蓬老师Correction time:2018-12-11 15:30:37
Teacher's summary:要注意, 复选框的name属性 , 必须是一个数组的名称