使用Javascript获取列表中选中的复选框数

我有一个多输入复选框列表，我想创建一个JS函数，当用户在复选框列表中选择超过指定的计数项时，它将拒绝该操作，但如果它们的数量较少，它将执行另一个函数

---

需要知道如何使用Javascript获取所选元素的数量，我很难做到这一点。

您可以选择所有的复选框并遍历它们，然后计算选中的元素。在代码中，“输入”在HTML中。如果你有这个号码，你可以根据它来处理行动

let checkboxes = document.querySelectorAll('input');
    let countOfChecked = 0;
    checkboxes.forEach(element => {
        if (element.checked) {
            countOfChecked++;
        }
    });

if (countOfChecked > 10){
  // reject that action...
} else {
  // do your stuff...
}

---

只需使用带有选择器的

querySelectorAll

方法获取所选复选框的长度

input[type=checkbox]：checked

关于在单个事件侦听器中处理多个元素上的事件的精彩解释

document.addEventListener（“单击”），函数（事件）{
var elem=event.target；
if（elem.tagName==“输入”&&elem.type==“复选框”）
{
var max=3，count=document.querySelectorAll（“input[type=checkbox]：checked”）.length；
if（count>max）event.preventDefault（）；
}
});
函数checkCount（）
{
如果（计数简单方法：

VanillaJS

let inputs = document.querySelectorAll('input[type=checkbox]');
let limit = 2;
let countSelected = 0;

Array.prototype.forEach.call(inputs, function(el, i){

    el.addEventListener('click', function(){

  countSelected = document.querySelectorAll('input[type=checkbox]:checked').length;

    if(countSelected > limit){
        el.checked = false;
      // do something... like alert: u can not select more than 10 itens
    }else{
        // do something... like change color of text
    }

  });

});


Jquery

let inputs = $('input[type=checkbox]');
let limit = 2;
let countSelected = 0;

inputs.on('change', function() {

    countSelected = $('input[type=checkbox]:checked');

   if(countSelected.length > limit) {
        this.checked = false;
      // do something... like alert: u can not select more than 10 itens
    }else{
        // do something... like change color of text
    }

});


每当您需要查找所选复选框的数量时，请使用css
checked
pseudo选择器。
请包含您正在使用的代码，这样我们可以有效地、切实地回答您的问题。它还可以帮助其他人从这个问题及其答案中学习。这正是我想要的。我如何更进一步，并防止在达到限制后检查任何内容？有没有办法“取消选中”当他们单击第11个元素时？是的。你必须检查每次单击的计数。如果大于指定的计数，则阻止默认操作。用相同的方法更新我的答案。@Zeusftw