Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选边框</title> <style type="text/css"> .box{ width: 120px; height: 250px; border: 1px solid black; border-radius: 5px; padding: 0px 10px; margin: 20px auto; } .box div{ border-bottom: 1px solid black; padding-bottom: 10px; } .box input{ margin: 10px; } </style> </head> <body> <div class="box"> <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> <script type="text/javascript"> function checkall(){ var checkall,item; checkall=document.getElementById('checkall') //checkall 全选 item=document.getElementsByName('item[]') for (var i = 0; i<item.length; i++) { if (checkall.checked) { //checked 属性规定在页面加载时应该被预先选定的 input 元素。 item[i].checked=true }else{ item[i].checked=false } } } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选边框</title> <style type="text/css"> .box{ width: 120px; height: 250px; border: 1px solid black; border-radius: 5px; padding: 0px 10px; margin: 20px auto; } .box div{ border-bottom: 1px solid black; padding-bottom: 10px; } .box input{ margin: 10px; } </style> </head> <body> <div class="box"> <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> <script type="text/javascript"> function checkall(){ var checkall,item; checkall=document.getElementById('checkall') //checkall 全选 item=document.getElementsByName('item[]') // for (var i = 0; i<item.length; i++) { // if (checkall.checked) { //checked 属性规定在页面加载时应该被预先选定的 input 元素。 // item[i].checked=true // }else{ // item[i].checked=false // } // } var i=0; while(i<item.length){ if (checkall.checked) { item[i].checked=true }else{ item[i].checked=false } i++ } } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例