本題代碼僅供參考
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
? ? ? ? <title>無標題文檔</title>
? ? </head>
? ? <body>
? ? ? ? <form>
? ? ? ? ? 請選擇你愛好:<br>
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby1">? 音樂
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby2">? 登山
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby3">? 游泳
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby4">? 閱讀
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby5">? 打球
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby6">? 跑步 <br>
? ? ? ? ? <input type="button" value = "全選" onclick = "checkall();">
? ? ? ? ? <input type="button" value = "全不選" onclick = "clearall();">
? ? ? ? ? <p>請輸入您要選擇愛好的序號,序號為1-6:</p>
? ? ? ? ? <input id="wb" name="wb" type="text" >
? ? ? ? ? <input name="ok" type="button" value="確定" onclick = "checkone();">
? ? ? ? </form>
? ? ? ? <script type="text/javascript">
? ? ? ? function checkall(){
? ? ? ? ? ? var hobby = document.getElementsByTagName("input");
? ? ? ? ? ? ?for(var i=0;i<hobby.length;i++){
? ? ? ? ? ? hobby[i].checked=true;
? ? ? ? ?// 任務2
? ? ? ? ?}
? ? ? ? }
? ? ? ? function clearall(){
? ? ? ? ? ? var hobby = document.getElementsByName("hobby");
? ? ? ? ? ? for(var i=0;i<hobby.length;i++){
? ? ? ? ? ? hobby[i].checked=false;
? ? ? ? ?// 任務2
? ? ? ? ?}
? ? ? ? }
? ? ? ? function checkone(){
? ? ? ? ? ? var j=document.getElementById("wb").value;
? ? ? ? ? ? var hobby=document.getElementsByName("hobby");
? ? ? ? ? ? hobby[j-1].checked=true;
? ? ? ? ?// 任務3
? ? ? ? }
? ? ? ? </script>
? ? </body>
</html>
2019-12-02
案例中的參考代碼其實是有bug的,bug就是在任務3中,假如你輸入1,確定,“音樂”會被勾選,這時候(不刷新頁面的情況下)如果你改變主意了,輸入了2,確定,“登山”會被選上,但是“音樂”并不會取消選擇,仍然是選中狀態(tài)......以此類推。
這時候把任務2中的代碼直接拿過來,就能夠解決這個bug了:
當然,如果你覺得這不算是個bug,那就請忽略...