javacriptで 'checkbox input tags'の数を取得

Question

私は特定の数のdivを持つHTMLページを持っており、各divの中に1つのチェックボックスもあります。

さんが言ってみましょう：

<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で確認されている1参照。私はここでhttp://www.randomsnippets.com/2008/05/15/how-to-loop-through-checkboxes-or-radio-button-groups-via-javascript/のチュートリアルを見つけましたが、フォーム要素を使用してこれらのチェックボックスをすべて使用し、form.elements.lengthを使用して番号を取得しますが、プロジェクトフォームは必要ありません。

誰でも？ありがとう！

Answer 1

CSSセレクタ'.yea input[type=checkbox]:checked'で使用Document.querySelectorAll()そうのように：

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 2

次の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 3

があなたのページの使用中のすべてのチェックボックスのリストを取得するには

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

番号の使用を取得する

0は、すべてのchackedのチェックボックスのリストを取得するには

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