分享一下三種方法做任務3
<!DOCTYPE HTML>
<html>
? ? <head>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
? ? ? ? <title>無標題文檔</title>
? ? </head>
? ??
? ? <body>
? ? ? ? <form>
? ? ? ? ? 請選擇你愛好:<br>
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby1"> ?1.音樂
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby2"> ?2.登山
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby3"> ?3.游泳
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby4"> ?4.閱讀
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby5"> ?5.打球
? ? ? ? ? <input type="checkbox" name="hobby" id="hobby6"> ?6.跑步 <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")&&document.getElementsByName("hobby");
? ? ? ? ? ? for ( i =0; i<hobby.length; i++){
? ? ? ? ? ?hobby[i].checked = true;
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? }
? ? ? ? function clearall(){
? ? ? ? ? ? var hobby = document.getElementsByName("hobby");
? ? ? ? ? ? for (i=0; i<hobby.length;i++){
? ? ? ? ? ? ? hobby[i].checked= false;
? ? ? ? ? ? }
? ? ? ? ?// 任務2 ? ?
? ? ? ? ? ??
? ? ? ? }
? ? ? ??
? ? ? ? function checkone(){
? ? ? ? ? var hobby = document.getElementsByName("hobby");
? ? ? ? ? ? var j=document.getElementById("wb").value;
? ? ? ? ? ?//switch和if差不多但是switch更加簡潔 但是都比較繁瑣， 太多選項就不能用了
? ? ? ? ? ?switch(j){
? ? ? ? ? ? ?case '1' : hobby[0].checked= true;
? ? ? ? ? ? ?break;
? ? ? ? ? ? ?case '2' : hobby[1].checked= true;
? ? ? ? ? ? ?break;
? ? ? ? ? ? ?case '3' : hobby[2].checked= true;
? ? ? ? ? ? ?break;
? ? ? ? ? ? ?case '4' : hobby[3].checked= true;
? ? ? ? ? ? ?break;
? ? ? ? ? ? ?case '5' : hobby[4].checked= true;
? ? ? ? ? ? ?break;
? ? ? ? ? ? ?case '6' : hobby[5].checked= true;
? ? ? ? ? ? ?break;
? ? ? ? ? ? ?default:alert('only have 6 options')
? ? ? ? ? ?}
? ? ? ? }
? ? ? ? //用循環做 暫時感覺最好的辦法
? ? ? /* ? ? ? ? ?function checkone(){
? ? ? ? ? ? clearall();
? ? ? ? ? ? var hobby = document.getElementsByName("hobby");
? ? ? ? ? ? var j=document.getElementById("wb").value;
? ? ? ? ? ? for(var i=0;i<j.length;i++){
? ? ? ? ? ? ? hobby[(j.charAt(i))-1].checked=true;?
? ? ? ? ? ? ? ? if( j<1||j>6 ){
? ? ? ? ? ? ? ? ? ?alert('over limit')
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? } ? ?
? ? ? ? ? ??
? ? ? ? }*/
? ? ? ??
? ? ? ? //用ID方法做 這種方法局限性比較大而且不夠智能
? ?/* ? ? ?function checkone(){
? ?clearall();
? ? ? ? ? ? var j=document.getElementById("wb").value;
? ? ? ? ? ? var hobby = document.getElementById("hobby"+j);
? ? ? ? ? ? if (j<1||j>6){
? ? ? ? ? ? ? alert('over limit')
? ? ? ? ? ? }
? ? ? ? ? ? hobby.checked = true;
? ? ? ? ? ??
? ? ? ? }*/
? ? ? ??
? ? ? ??
? ? ? ? </script>
? ? </body>
</html>
2021-11-14
為啥要用for循環啊 不用也是可以實現啊
2020-09-14
var j=document.getElementById("wb").value;
????var hobby = document.getElementsByName("hobby");
????for (let i=0; i< hobby.length; i++) {
????if(i == j-1) {
????????hobby[i].checked = "checked"
????}
}
hobby本身是個數組，只要選中的數字-1等于數組下標就找到了那個hobby，完事
2020-09-08
大家一起來分享一下其他方法吧