在文本框输入固定数字时,选中多选框的某个元素,限制多选框的选中个数为什么没有效果?

新手上路,请多包涵

题目描述

限制多选框的选中个数,用一个方法单独写出来,在文本框输入数字选中多选框的某个元素时,到了该限制的时候没有反应。

题目来源及自己的思路

来源:慕课网JavaScript的一道题目+我自己的一点想法。
思路:先判断多选框是否选中,如果已经开始选中就调用限制多选框选中个数的方法,网上说要设置点击多选框触发方法,然后在该方法中将checked设置为false,但是文本框控制多选框不需要点击多选框,所有不能触发该方法,多选框用onclick方法将设置多选框的checked=false后,多选框元素还是被选中了,查了好多资料都没有解决。

相关代码

<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;
            }
          }
    }
    
    function clearall(){
        // 全不选
        var hobby = document.getElementsByName("hobby");
        for(var i=0;i<hobby.length;i++){
        if(hobby[i].checked==true){
            hobby[i].checked=false;
        }
      }    
        
    }
    
    function checkone(){
        //选一个
        var num=0;
        var j=document.getElementById("wb").value;
        var hobby=document.getElementsByName("hobby");
        if(j<=0||j>6){
            alert("请输入正确的数字!");
        }else
        {
        hobby[j-1].checked=true;
        }
        for(var i=0;i<hobby.length;i++){
         if(hobby[i].checked==true){
            autoCheck("hobby",3);
         }
       }    
    }
    //  限制单个选中的最大个数
    function autoCheck(name,limit){
        var hobby=document.getElementsByName(name);
        function check()
        {
          var num=0;
          for(var i=0;i<hobby.length;i++)
          {
             if(hobby[i].checked){num++}
             if(num>limit)
             {
                return false;
             }
          }
          return true;
        }
        function checkedNum(){
           for(var i=0;i<hobby.length;i++){
            if(!check()){
                alert("只能选择"+limit+"项哦!");
                hobby[i].checked=false;
                }
            }
        }
     }
    
    </script>
</body>

你期待的结果是什么?实际看到的错误信息又是什么?

期待:无论是点击多选框还是在文本框中输入数字控制多选框,到了限制条件时都无法再选中。
错误:文本框输入数字控制多选框无法触发限制多选框的方法,与多选框被点击时触发方法无法达到一致。

阅读 2.1k
2 个回答

在你原来的基础上改了一点点

<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;
      }
    }
  }

  function clearall() {
    // 全不选
    var hobby = document.getElementsByName("hobby");
    for (var i = 0; i < hobby.length; i++) {
      if (hobby[i].checked == true) {
        hobby[i].checked = false;
      }
    }

  }

  function checkone() {
    //选一个   
    var j = document.getElementById("wb").value;
    var hobby = document.getElementsByName('hobby');
    if (j <= 0 || j > 6) {
      alert("请输入正确的数字!");
    } else
    if (autoCheck("hobby", 3, 'checkone')) {

      hobby[j - 1].checked = true;
    }

  }
  // 输入时 限制单个选中的最大个数
  function autoCheck(name, limit, type) {
    var hobby = document.getElementsByName(name);
    if (type == 'checkone') {
      var num = 1;
    } else {
      var num = 0;
    }

    for (var i = 0; i < hobby.length; i++) {
      if (hobby[i].checked) {
        num++
      }
    }
    console.log(num)
    if (num <= limit) {
      return true;
    } else {
      alert('超限了亲')
      return false;
    }
  }
  //  直接选择时限制单个选中的最大个数
  function sigleCheck() {
    var hobby = document.getElementsByName('hobby');
    if (autoCheck("hobby", 3)) {
      for (var i = 0; i < hobby.length; i++) {
        hobby[i].onclick = function (e) {

          if (autoCheck("hobby", 3, 'sigleCheck')) {

            e.target.checked = true;
          } else {
            e.target.checked = false;
          }


        }


      }

    }
  }
  sigleCheck()

</script>
</body>

把你script里面的代码替换成下面代码即可实现需求,为了方便书写直接我使用es6语法,需确保你的浏览器支持

const limit = 3;

const hobby = [].map.call(document.querySelectorAll("input[name='hobby']"), el => el);

const checkedLength = () => hobby.filter(el => el.checked).length;

hobby.forEach(el => {
  el.addEventListener('change', e => {
    if (checkedLength() > limit) {
      e.target.checked = false;
    }
  });
});

function checkall() {
  hobby.forEach(el => el.checked = true)
}

function clearall() {
  hobby.forEach(el => el.checked = false)
}

function checkone() {
  const index = document.getElementById("wb").value;
  if (index > 0 && index < 6) {
    const el = hobby[index - 1];
    if (!el.checked) {
      if (checkedLength() < limit) {
        el.checked = true;
      } else {
        alert("只能选择" + limit + "项哦!");
      }
    }
  } else {
    alert("请输入正确的数字!");
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题