成功运行出来了!第三步我用的是switch..case...实现,这样用不知道有没有其他问题。

来源:9-4 区别getElementByID,getElementsByName,getElementsByTagName

慕头师兄

2019-06-22 17:18

<!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">  音乐

          <input type="checkbox" name="hobby" id="hobby2">  登山

          <input type="checkbox" name="hobby" id="hobby3">  游泳<br/>

          <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();">

          <input name="cancel" type="button" value="取消" onclick = "clean();">

        </form>

<script type="text/javascript">

// 任务1 

   function checkall(){

   var hobby = document.getElementsByTagName("input");

   for(var i=0;i<hobby.length;i++)

      if(hobby[i].type=="checkbox")

        hobby[i].checked=true;

}


// 任务2  

   function clearall(){

   var hobby = document.getElementsByName("hobby");

    for(var i=0;i<hobby.length;i++)

      if(hobby[i].type=="checkbox")

      hobby[i].checked=false;

}


// 任务3       

   function checkone(){

    var j=document.getElementById("wb").value;

    var hobby = document.getElementsByName("hobby");

    switch(parseInt(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("请重新输入(1-6)的数字!");

    }

}


    function clean(){

     var hobby=document.getElementsByName("hobby");

     for(var i=0;i<hobby.length;i++){

         hobby[i].checked=false;

     }

     document.getElementById("wb").value="";

    }

        

        </script>

    </body>

</html>


写回答 关注

1回答

  • 慕头师兄
    2019-06-22 17:34:40

    第三步第2种简便方法:

    <!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">  音乐

              <input type="checkbox" name="hobby" id="hobby2">  登山

              <input type="checkbox" name="hobby" id="hobby3">  游泳<br/>

              <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();">

              <input name="cancel" type="button" value="取消" onclick = "clean();">

            </form>

    <script type="text/javascript">

    // 任务1 

       function checkall(){

       var hobby = document.getElementsByTagName("input");

       for(var i=0;i<hobby.length;i++)

          if(hobby[i].type=="checkbox")

            hobby[i].checked=true;

    }


    // 任务2  

       function clearall(){

       var hobby = document.getElementsByName("hobby");

        for(var i=0;i<hobby.length;i++)

          if(hobby[i].type=="checkbox")

          hobby[i].checked=false;

    }


    // 任务3       

       function checkone(){

        var j=document.getElementById("wb").value;  

        if(!(parseInt(j)>=1&&parseInt(j)<=6)){

        alert("请重新输入(1-6)的数字!");

       }

        document.getElementById("hobby"+j).checked=true;

     }

        function clean(){

           document.getElementById("hobby"+j).checked=false;

           document.getElemntById("wb").value="";

            </script>

        </body>

    </html>


JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468062 学习 · 21891 问题

查看课程

相似问题