关于js全选和反选的一个小问题,谢!

在做js全选和反选的练习,遇到了问题有点不明白,求大神赐教。
1:我打印了hobby.length的长度是10,但是最终效果只加了前6个,是不是因为type不同,只有type="checkbox"才起作用
2:hobby[i].checked=true;这句话的含义是什么?(这个问题已经明白
checked 属性设置或返回 checkbox 是否应被选中
checkboxObject.checked=true|false

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <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++){
                   hobby[i].checked=true;
               }
          // 任务1 
           
        }
        function clearall(){
            var hobby = document.getElementsByName("hobby");
            
         // 任务2    
            
        }
        
        function checkone(){
            var j=document.getElementById("wb").value;
        
         // 任务3
        
        }
        
        </script>
    </body>
</html>
阅读 3.9k
5 个回答

document.getElementsByTagName 是获取指定标签名称的元素数组 你的 input 标签有 10 个
checked 属性当然只对 type="checkbox"input 元素生效

1.checkbox才有checked属性,所以前6个有效
2.第2个你已经懂了。。

问题1:

        var hobby = document.getElementsByTagName("input");//获取input标签的元素,获取是10个;
        var hobby = document.getElementsByName("hobby");//改为通过元素的name来获取;或者通过把6个复选框,放在一个父级里,然后通过父级来选择

不同type的input对象含有的属性也不一定相同的。button text date这些类型的input就没有checked属性。。所以赋值当然也是无效的啦。。

input属性为checkbox的才有checked属性

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题