检查有多少个复选框是用类名选中的？

Question

我已经找到了这个被接受的答案，但不知怎么的，它对我不起作用：

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}

当我尝试记录inputElements时，它会记录：

<input type="checkbox" id="checkbox-2" class="todo-checkbox" onclick="handleCheck('text-2', 'checkbox-2')">

我只想使用纯js，而不是jquery，帮助？

Answer 1

要获得所有复选框的计数，可以使用filter()，如下所示：

​

var inputElements = [].slice.call(document.querySelectorAll('.messageCheckbox'));
var checkedValue = inputElements.filter(chk => chk.checked).length;

console.log(checkedValue);

<input type="checkbox" class="messageCheckbox" checked>
<input type="checkbox" class="messageCheckbox">
<input type="checkbox" class="messageCheckbox" checked>

​

Answer 2

将名称属性赋予所有复选框，并使用此代码对复选框进行计数

$('input:checkbox[name=ideaList]:checked').length

如果要获得选中复选框的值，请接受vatiable并在该变量中推送选中的复选框值。

var selectedIdeas    = [];
$.each($("input:checkbox[name=ideaList]:checked"), function(){
     selectedIdeas.push($(this).val());
});

Answer 3

<input type="checkbox" class="todo-checkbox">
<input type="checkbox" class="todo-checkbox">
<input type="checkbox" class="todo-checkbox">
<input type="checkbox" class="todo-checkbox">
<input type="checkbox" class="todo-checkbox">

选择所有复选框，然后使用forEach循环来计算选中的复选框

function countChecked(){
  const checkboxes = document.querySelectorAll('.todo-checkbox')
  let count=0
  checkboxes.forEach(checkbox=>{
    if(checkbox.checked) count+=1
  })
  return count
}

您可以使用代码这里

当您记录inputElementsi时，您得到的是节点本身、document.getElementsByClassName、document.querySelectorAll等，它们返回的是一个NodeList而不是JavaScript数组。