摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選實(shí)例</title> <style type="text/css"> #wai{width:150px;height
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選實(shí)例</title> <style type="text/css"> #wai{width:150px;height:300px;border:2px solid #ccc;border-radius:10px;margin:0px auto;box-shadow:3px 2px 3px #cc1;} span{font-size:20px; font-weight:bold;color:red;margin:0px auto;display:block;text-align:center;margin-top:15px;} #ks{display:block;margin:10px auto;} input{margin:8px 10px;} </style> <script type="text/javascript"> function start(){ document.getElementById('show').style.display="block" } function chall(){ 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; } } function tj(){ alert("謝謝參與調(diào)查!") } </script> </head> <body> <div id="wai"> <span>興趣調(diào)查</span> <input id="ks" type="button" value="開始" onclick="start(this)"> <div id="show" style="display:none;"> <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[]">宅<br> <div> <input type="checkbox" id="checkall" onclick="chall()"><label for="checkall">全選</label> </div> <input type="button" value="提交" onclick="tj(this)"> </div> </div> </body> </html> <!-- 第一點(diǎn):對(duì)label標(biāo)簽有點(diǎn)陌生了,發(fā)現(xiàn)如果label里面的for屬性值如果和input的id值不同的話,實(shí)現(xiàn)不了點(diǎn)文字就選中的效果。 第二點(diǎn):除了id獲取,別的獲取都是加個(gè)s。 -->
批改老師:天蓬老師批改時(shí)間:2018-12-29 16:58:16
老師總結(jié):name="item[]", 全選 的重點(diǎn)是在這里