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

我有一个HTML页面，其中包含一定数量的div，每个div内还有一个复选框。通过javascript获取'复选框输入标签'的数量

比方说：

<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来获取数字，但是在我的项目表单中并不是必需的。

有人吗？谢谢！

来源

2017-04-06 Hang

'document.querySelectorAll（”酵母输入[类型= “复选框”]]：检查 '）。length' – Tushar

谢谢图莎尔，但是这并未'工作。我改变了你的代码到document.querySelectorAll（'。heh input [type =“checkbox”]：checked'）。length; （将.yea更改为.heh并删除了一个]）并制作了一个小提琴https://jsfiddle.net/chenhang91/tzeek1en/3/。你能检查什么是错的吗？ – Hang

@Tushar请参阅https://jsfiddle.net/chenhang91/tzeek1en/7/ – Hang

使用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>

来源

2017-04-06 04:44:38 Ricky

您的回答不仅解决了我的问题，而且还帮助我循环使用它们。谢谢瑞奇！ – Hang

不客气'：）'。 – Ricky

请尝试以下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. 
    } 
}

来源

2017-04-06 04:40:54 user7761868

感谢您的回复user7761868！但是，此代码不起作用。我明白你的意思。我做了一个jsfiddle来调试它：https://jsfiddle.net/chenhang91/tzeek1en/1/想要看看这里吗？ – Hang

请参阅https://jsfiddle.net/chenhang91/tzeek1en/6/ – Hang

它不会工作，因为for循环只运行一次，当文档被加载。这个循环需要在任何输入复选框被选中时运行，即在复选框上监听事件。你能看到结果：https：//jsfiddle.net/tzeek1en/8/ – user7761868

为了让在你的页面使用的所有复选框的列表

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

获得数使用

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

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

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

来源

2017-04-06 04:45:22 BiJ

document.querySelectorAll（'input [type =“checkbox”]：checked'）是否返回一个对象或数字？ https://jsfiddle.net/chenhang91/tzeek1en/5/ – Hang

这将返回所有复选框元素的列表。要得到号码，请使用'.length' – BiJ

感谢您的帮助BiJ！我看到唯一的区别是你已经将document.querySelectorAll（'input [type =“checkbox”]'）移动到“button click”函数的内部，并将.length添加到它，现在它工作。然后，我还将.length添加到我的小提琴中，然后唯一的区别就是这行代码的位置。但我不明白为什么把这一行放在“按钮点击”的范围内会起作用，但如果它在外面，它将无法工作？ $（document）.ready（）将在整个页面加载后执行，不是吗？你能告诉我这是为什么吗？：D – Hang

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

回答

相关问题