Question

我对JS比较陌生，所以我对此有点不满：

假设我有40个复选框，但用户可以选择不超过10个。

我设置了复选框，标记为checkbox1，checkbox2等，最多40个。用户不能选择超过10个。我将如何进行此操作？

我想这样做的方式就是这样，但是我不确定这是否会起作用，因为显然有40个字段，然后如果他们取消选中它会怎么样？

function checkValidation() {
  if (document.getElementById('checkbox1').isChecked()) {
    document.getElementById('validation').value() + 1;
  }
}

因此，每次检查时，它都会在文本框验证中添加1，然后我可以执行if语句来说明validation.value() > 8是否然后警告说他们不能再检查了。
我认为这不是最好的方式，好像他们取消选中框一样，我的功能不会考虑到这一点吗？

希望这是有道理的，如果需要澄清，请告诉我，我可以进一步解释。

Answer 1

您可以在所有考虑的复选框上添加一个类，例如chk。

然后你宣布你的计数功能：

function countCheck(){
    return $(".chk:checked").length;
}

最后，在复选框上添加一个事件，点击：

$(document).on("click",".chk",function(){
    var numberChecked = countCheck();
    //update your input
   $("#validation").val(numberChecked );
});

Answer 2

尝试以下方式：

$('#myBtn').click(function(){
  var countCheckd = $('input[type=checkbox]:checked').length;
  if(countCheckd >= 3){   
    console.log('You have 3 or more checked: ' +countCheckd);
  }
  else{
    console.log('You have less than 3 checked: ' +countCheckd);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />1
<input type="checkbox" />2
<input type="checkbox" />3
<input type="checkbox" />4
<input type="checkbox" />5

<br><br>
<input type="button" id="myBtn" value="Check"/>

Answer 3

只需勾选复选框并检查每次点击的次数，在下面的示例中，如果点击次数超过5 ，则会发出提示消息，但不允许点击更多复选框。

＆＃13;

$(function(){
    for(var i=0;i<=30;i++){
        $(".test").append("checkbox "+i+"<input type='checkbox' name='chk[]' class='check' id='check_"+i+"'><br />");
    }
})

$(document).on("click",".check",function(){
    var checked = $(".check:checked").length
    if(checked > 5){
        alert("Maximum 5");
        return false;
    } 
   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='test'>
</div>

＆＃13;

Answer 4

您可以尝试这样的事情：

$('input[type=checkbox]').on('change', function (e) {
    if ($('input[type=checkbox]:checked').length > 10) {
        $(this).prop('checked', false);
        alert("Only 10 selection is allowed");
    }
});

Answer 5

这有效：

＆＃13;

// these are global variables
var checkBoxChecks = 0;
var maxChecks = 10;

$('input[type="checkbox"]').on('click', function()
{
    // if the currently clicked checkbox is now checked
    if(this.checked)
    {
       if(checkBoxChecks < maxChecks) checkBoxChecks++;
       else
       {
           this.checked = false;
           alert("You have reached the maximum amount of " + maxChecks + " checks.");
       }
    }
    else checkBoxChecks--;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

＆＃13;

Answer 6

如果检查输入的长度超过10，则此代码取消选中上一个复选框：

$('input[type="checkbox"]').on('click', function(){
  var max=0;
  var t=$(this);
  $('input[type="checkbox"]:checked').each(function(){
    if($(this).data('oops')>max){
      max=$(this).data('oops');
    }
  });
  t.data('oops', (max+1));
  if($('input[type="checkbox"]:checked').length>10){
    $('input[type="checkbox"]:checked').each(function(){
      if($(this).data('oops')==max){
        $(this).prop('checked', false);
      }
    });
  }
});

不添加全局变量。

See

使用javascript / jquery选中/取消选中复选框时添加和删除计数？

6 个答案: