摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{padding: 0;margin: 0} .container{ width: 100px; margin: 0 auto; border: 1px solid black; } .top{border-bottom: 1px dashed red; padding-bottom: 3px; } </style> </head> <body> <div class="container"> <div class="top"> <input type="checkbox" id="ckall" onclick="ckalls(this)"> </div> <div class="bodys"> <input type="checkbox" name="item[]"><br/> <input type="checkbox" name="item[]"><br/> <input type="checkbox" name="item[]"><br/> <input type="checkbox" name="item[]"><br/> <input type="checkbox" name="item[]"> </div> </div> </body> </html> <script> var ckall = document.getElementById("ckall"); //全选按钮 var childs = document.getElementsByName("item[]"); //其他选择框 function ckalls() { for(var i=0;i<childs.length;i++){ //如果全选 选中其他选择框就选中,反之就取消选中 if(ckall.checked){ childs[i].checked=true; }else{ childs[i].checked=false; } } } </script>
批改老师:韦小宝批改时间:2019-03-10 13:13:50
老师总结:写的很不错 全选这个在实际的开发中是很重要的位置 所有网站基本上都会使用到 一定要好好掌握