看不懂,求大神们来详细解答一下,任务1,2,3的步骤

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

慕粉1461748147

2016-08-03 15:53

<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">  游泳
          <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");
           
          // 任务1
           for(var i=0;i<hobby.length;i++){
               hobby[i].checked=true
           }
        }
        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;
            if(parseInt(j)>6||parseInt(j)<1){
                alert("请重新输入")
            }
        document.getElementById("hobby"+j).checked = true;
         // 任务3
        
        }
        
        </script>

写回答 关注

2回答

  • 无知的狗3576298
    2016-08-05 16:21:15

    <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">  游泳
              <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");     //寻找文档中input标签,并将input标签按顺序赋值给hobby,所以此时hobby包含的是个数组
              // 任务1 
               for(var i=0;i<hobby.length;i++){
                   hobby[i].checked=true
               } //定义一个for循环函数循环次数为hobby数组的长度,每执行一次循环即给hobby数组其中的第(i)个元素的chenked属性赋一个“true”值。
            }
            function clearall(){
                var hobby = document.getElementsByName("hobby");
                   for(var i=0;i<hobby.length;i++){
                   hobby[i].checked=false
               }//恕我有点懒,同上,赋值false。
             // 任务2    
                
            }
            
            function checkone(){
                var j=document.getElementById("wb").value;//将id为wb的元素的值赋给j。

                if(parseInt(j)>6||parseInt(j)<1){
                    alert("请重新输入")
                }//当给j赋予的值大于6,当给j赋予的值小于1时。弹出提示框——请重新输入。        document.getElementById("hobby"+j).checked = true;

    //否则给hobby数组其中的第(j)个元素的chenked属性赋一个“true”值。

             // 任务3
            
            }
            
            </script>

  • 水里有条鱼
    2016-08-03 16:29:38

         function checkall(){
                var hobby = document.getElementsByTagName("input");  //得到关于对象input的数组(就是根据name得到六个选择)
               
              // 任务1 
               for(var i=0;i<hobby.length;i++){  
                   hobby[i].checked=true  //转换过来意思是,六个选择逐一打勾
               }
            }
            function clearall(){
                var hobby = document.getElementsByName("hobby");  ////得到关于对象input的数组(就是根据name得到六个选择)

                   for(var i=0;i<hobby.length;i++){
                   hobby[i].checked=false  ////转换过来意思是,六个选择逐一取消打钩

               }
             // 任务2    
                
            }
            
            function checkone(){
                var j=document.getElementById("wb").value;   //得到你输入的号
                if(parseInt(j)>6||parseInt(j)<1){  //判断是不是1到6号
                    alert("请重新输入")  //不是弹出重新输入
                }
            document.getElementById("hobby"+j).checked = true;  //各个选择的ID不就是“hobby1”,“hobby2”等等嘛,其实就是假设j==2,"hobby"+j = "hobbyj" = “hobby2” 就得到对应的选择项2登山,然后打钩
             // 任务3
            
            }

JavaScript进阶篇

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

468061 学习 · 21891 问题

查看课程

相似问题