Question

我有一个HTML页面，其中包含一定数量的div，每个div中也有一个复选框。

让我们说：

(set! *print-meta* true)

现在我想循环浏览这些复选框，看看在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');

这将返回带有已检查输入集合的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

获取所有chacked复选框的列表使用

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

通过javascript获取“复选框输入标签”的数量

3 个答案: