У меня есть checkbox's
списка в div, который не является формой.
<div id="priceTree">
<div class="prices"><span class="left"><input type="checkbox" checked="checked" id="price_1"> Small </span><span class="right">5.00</span><span class="center"> </span></div>
<div class="prices"><span class="left"><input type="checkbox" checked="checked" id="price_2"> Medium </span><span class="right">10.00</span><span class="center"> </span></div>
<div class="prices"><span class="left"><input type="checkbox" checked="checked" id="price_3"> Large </span><span class="right">15.00</span><span class="center"> </span></div>
</div>
Этот список имеет введенные элементы, поэтому может не всегда быть 3. Как я могу получить идентификатор только для отмеченных флажков?
Вот ванильное JavaScript-решение:
var checkedCbs = document.querySelectorAll('#priceTree input[type="checkbox"]:checked');
var ids = [];
for (var i = 0; i < checkedCbs.length; i++) ids.push(checkedCbs[i].id);
//return ids;
Если вам нужен массив идентификаторов проверенных элементов, используйте:
var result = $('#priceTree input:checked').map(function() {
return this.id;
}).get();
$('input[type=checkbox]:checked').attr('id');
Для итерации по всем флажкам используйте каждый:
$('input[type=checkbox]:checked').each(function(){
console.log($(this).attr('id'));
});
Или,
$('#priceTree :checked').each(function(){
console.log($(this).attr('id'));
});
Чтобы проверить идентификаторы всех #priceTree
в #priceTree
div:
$('#priceTree input:checked').each(function(){
alert($(this).attr('id'));
})