                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

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

<!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>

__Leo__

2018-08-01

源自：JavaScript进阶篇 9-4

关注问题我要回答

762

操作

收起

4 回答

风起临冬回答被采纳 +2 积分
2018-08-02

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

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

1 回复有任何疑惑可以回复我~

收起回答

__Leo__ 提问者

非常感谢！厉害了兄得

2018-08-02 回复有任何疑惑可以回复我~

慕移动9181930
2022-03-23

你的函数没有调用，所以没出现效果姐，我能说你才发现吗

0 回复有任何疑惑可以回复我~

收起回答

学前端的小王
2018-08-02

任务二不需要判断

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; 已经有大佬说过了。

0 回复有任何疑惑可以回复我~

收起回答

__Leo__ 提问者

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

2018-08-03 回复有任何疑惑可以回复我~

慕哥7760234
2018-08-02

function checkone(){
            var j=document.getElementById("wb").value;
         // 任务3
            var i = j - 1;
            hobby[i].checked = true;
        }

0 回复有任何疑惑可以回复我~

收起回答

慕娘1945682

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

2018-09-02 回复有任何疑惑可以回复我~