Получить количество флажков, отмеченных в списке, используя Javascript

Question

У меня есть несколько входных списков флажков, и я хочу создать функцию JS, которая, когда пользователь выбирает больше, чем указанное количество элементов в списке флажков, будет отклонять действие, но если их будет меньше, он будет выполнять другую функцию.

Нужно знать, как получить количество элементов, выбранных с помощью Javascript, мне очень тяжело это делать.

Answer 1

Просто получите выбранную длину флажков, используя метод querySelectorAll с селектором input[type=checkbox]:checked.

См. Это замечательное объяснение об обработке событий для нескольких элементов в одном приемнике событий.

document.addEventListener("click",function(event){
    var elem = event.target;
    if(elem.tagName=="INPUT" && elem.type=="checkbox")
    {
        var max = 3, count = document.querySelectorAll("input[type=checkbox]:checked").length;
        if(count>max) event.preventDefault();
    }
});

function checkCount()
{
    
    
    if(count<=max) console.log("Selected");
    else console.log("Limit already reached");
    
}

<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 2

Простой подход:

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
    }

  });

});

http://jsfiddle.net/sjd8pa49/22/

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
    }

});

http://jsfiddle.net/6ezpk9cL/3/

Когда вам нужно найти количество выбранных флажков, используйте псевдоселектор css checked. Проверено Псевдоселектор

Answer 3

Вы можете выбрать все свои флажки и пройти через них и подсчитать проверенные. В коде «вход» находится в вашем 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...
}