使用javascript / jquery選中/取消選中復選框時添加和刪除計數？

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

只需勾選一個復選框，然后檢查每次點擊的次數，在下面的示例中，如果超過了點擊次數， 那么它會發出警報消息，並且不允許點擊更多復選框。

 $(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; } }); 

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

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

這有效：

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

 <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" /> 

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

無需添加全局變量。

看到