Question

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

需要知道如何获取使用Javascript选择的元素的数量，我在这方面很难过。

Answer 1

使用querySelectorAll方法和选择器input[type=checkbox]:checked来简单地获取所选复选框的长度。

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

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

您可以选择所有复选框，然后遍历它们并计算选中的复选框。在代码中，“ input”位于您的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...
}

Answer 3

简单方法：

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伪选择器。 Checked Pseudo Selector

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

3 个答案: