摘要:全选是要通过JavaScript的dom操作对全选和分选框的元素分别选择,利用事件函数,当全选框的checked属性值为真时,利用循环语句将分选框中的属性值也设置为真。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选<
全选是要通过JavaScript的dom操作对全选和分选框的元素分别选择,利用事件函数,当全选框的checked属性值为真时,利用循环语句将分选框中的属性值也设置为真。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选</title> <style type="text/css"> .box{width: 120px;height: 250px;border: 1px solid #ccc;border-radius: 5px;padding: 5px 10px;margin: 20px auto;} .box div { border-bottom: 1px solid #ccc;padding-bottom:10px;margin-bottom: 8px; } .box input{ margin: 8px; } </style> </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> <script type="text/javascript"> var checkall,item function checkall(){ 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;//fna } } } </script> </body> </html>