算法大佬们看看还有什么更好的写法没?

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

__Leo__

2018-08-01 14:51

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <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++){
                    if(hobby[i].type=="checkbox"){
                    hobby[i].checked=true;   
                    }               
                }
            }// 任务1   
        function clearall(){
            var hobby = document.getElementsByName("hobby");
            for (i=0;i<hobby.length;i++) {
                if (hobby[i].type=="checkbox") {
                    hobby[i].checked=false;
                }
            }
         // 任务2    
        }
        
        function checkone(){
            var j=document.getElementById("wb").value;
            var hobby = document.getElementsByName("hobby");
            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;
            }    // 任务3 
        }
       
        </script>
    </body>
</html>

写回答 关注

4回答

  • 风起临冬
    2018-08-02 09:03:19
    已采纳

    如果从name获取元素,就不用if判断了,只有复选的name是"hobby"。最后一个函数:function checkone(){
                var j=document.getElementById("wb").value;
                document.getElementById("hobby"+j).checked=true;

    输入j,就该ID"hobbyj"的属性,这样写更简单。

    __Leo_...

    非常感谢!厉害了兄得

    2018-08-02 15:47:48

    共 1 条回复 >

  • 慕移动9181930
    2022-03-23 06:23:47

    你的函数没有调用,所以没出现效果

  • 学前端的小王
    2018-08-02 23:43:22

    任务二不需要判断

            function clearall(){

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

             // 任务2 

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

                      hobby[i].checked=false;

               }

            }

    以及 document.getElementById("hobby"+j).checked=true; 已经有大佬说过了。 


    __Leo_...

    恩 谢谢 任务2那个我知道 因为是第一次学 系统就是为了让熟悉ByName和ByTagName 所以我就没改

    2018-08-03 09:49:59

    共 1 条回复 >

  • 慕哥7760234
    2018-08-02 15:16:24
    function checkone(){
                var j=document.getElementById("wb").value;
             // 任务3
                var i = j - 1;
                hobby[i].checked = true;
            }


    慕娘1945...

    要加上 var hobby =document.getElementsByName("hobby");才能实现

    2018-09-02 11:30:31

    共 1 条回复 >

JavaScript进阶篇

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

468190 学习 · 21891 问题

查看课程

相似问题