通过 javascript 获得 'checkbox input tags' 的数量

Question

我有一个 HTML 页面，其中有一定数量的 div，并且每个 div 内还有一个复选框。

假设：

<div class="yea" id="div1"><input type="checkbox" class="heh" id="chk1">YEAHEH1!</div>
<div class="yea" id="div2"><input type="checkbox" class="heh" id="chk2">YEAHEH2!</div>
<div class="yea" id="div2"><input type="checkbox" class="heh" id="chk3">YEAHEH3!</div>

现在我想遍历这些复选框，看看在 JS 中选中了哪个。我在这里 http://www.randomsnippets.com/2008/05/15/how-to-loop-through-checkboxes-or-radio-button-groups-via-javascript/ 找到了一个教程，但它使用表单元素来包含所有这些复选框并使用 form.elements.length 来获取数字，但是在我的项目表单中没有必要。

有人吗？谢谢！

Answer 1

尝试以下 javascript 代码。

var elementsToCheck = document.getElementsByClassName('heh');

for(var i = 0; i < elementsToCheck.length; i++) {
    if(elementsToCheck[i].checked) {
    // your code when the checkbox is selected goes here.
  }
}

Answer 2

将 Document.querySelectorAll() 与 CSS 选择器 '.yea input[type=checkbox]:checked' 一起使用，如下所示：

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

这将 return 一个 NodeList 包含已检查输入的集合。

示例：

document.getElementById('submit').addEventListener('click', function() {
  var checked = document.querySelectorAll('.yea input[type=checkbox]:checked'),
    i = 0,
    len = checked.length;
  for (i, len; i < len; i++) {
    checked[i].parentNode.classList.add('checked');
  }
});

.checked {
  color: red;
}

<div class="yea" id="div1"><input type="checkbox" class="heh" id="chk1">YEAHEH1!</div>
<div class="yea" id="div2"><input type="checkbox" class="heh" id="chk2">YEAHEH2!</div>
<div class="yea" id="div2"><input type="checkbox" class="heh" id="chk3">YEAHEH3!</div>

<button id="submit">Submit</button>

Answer 3

要获取页面中所有复选框的列表，请使用

document.querySelectorAll('input[type="checkbox"]')

获取号码使用

document.querySelectorAll('input[type="checkbox"]').length

要获取所有已选中复选框的列表，请使用

document.querySelectorAll('input[type="checkbox"]:checked')

通过 javascript 获得 'checkbox input tags' 的数量

Get the number of 'checkbox input tags' by javascript

javascript

html

loops

checkbox

checked