摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>全选</title> <style type="text/css"> body , ul,li {margin: 0px;padding: 0px;list-style: none;} .box{ width:100px; border: 2px solid #999; margin: 20px auto; border-radius:5px; box-shadow:2px 2px 15px #FFC0CB; text-align: center; } .box li{ margin:8px auto; } </style> </head> <body> <div class="box"> <ul> <li><label for="QX">全选</label><input id="QX" type="checkbox" name="quanxuan" onclick="InputTag('input')"></li> <li><label for="YY">游泳</label> <input id="YY" type="checkbox" name="item"></li> <li><label for="JS">健身</label> <input id="JS" type="checkbox" name="item" checked></li> <li><label for="KS">看书</label> <input id="KS" type="checkbox" name="item"></li> <li><label for="TG">听歌</label> <input id="TG" type="checkbox" name="item"></li> </ul> </div> <script> //所有的input集合 , 设置true选中 ,false没选中 var OTag , Bool ; //获取到标签集合 function InputTag(Tag){ if(!OTag){ OTag = document.getElementsByTagName(Tag) } //将全选中的checked属性值赋值给Bool Bool = OTag[0].checked; //从索引1开始,因为索引0是全选按钮 for(var i =1;i<OTag.length;i++){ OTag[i].checked = Bool; } } </script> </body> </html>
批改老师:韦小宝批改时间:2018-11-10 09:38:09
老师总结:嗯!写的很不错!很完整!课后还得多多练习啊!