通過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獲取'複選框輸入標籤'的數量

回答

相關問題