Как я могу перебрать список флажков в jQuery?

Question

for (var chkbox in jQuery("#dialog-message input[type='checkbox']")) {
    alert(chkbox.val() + " " + chkbox.is("checked"));
}

не работает;Я получаю сообщения о том, что val и is не определены. Я хотел бы перебрать флажки внутри элемента dialog-message, чтобы я мог видеть, какие из них проверены, и выполнять какой-то другой код для тех, которые есть, но вместо этого возникают ошибки.

Answer 1

for...in не ведет себя так, как вы ожидаете.

В вашем случае chkbox - это , а не элемент флажка;это целое число, представляющее индекс элемента в коллекции. Целые числа не имеют ни .value, ни .checked свойств, следовательно, ошибка undefined.

Вместо этого используйте jQuery's .each():

$("#dialog-message input[type=checkbox]").each(function() {
  console.log(`${this.value} is checked: ${this.checked}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dialog-message">
    <input type="checkbox" value="1" />
    <input type="checkbox" value="2" checked />
    <input type="checkbox" value="3" />
    <input type="checkbox" value="4" checked />
</div>

Однако , если ваша цель - получить коллекцию только проверенных (или непроверенных) элементов, вам не нужноперебирать их;Вы можете выбрать их, используя селектор :checked (или :not(:checked) для непроверенного):

$("#dialog-message input[type=checkbox]:checked").css("zoom", "2");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dialog-message">
    <input type="checkbox" value="1" />
    <input type="checkbox" value="2" checked />
    <input type="checkbox" value="3" />
    <input type="checkbox" value="4" checked />
</div>

Answer 2

JQuery имеет .each ()

https://api.jquery.com/jQuery.each/

$('div').each(function(idx){ console.log(idx, this) })

this, являющийся текущим элементом. Преимущество использования $ .each здесь - возможно, более чистый, более читаемый код, и вы также получаете преимущество цепочки.

Однако стоит отметить (хотя, вероятно, это не относится к вашему примеру), что цикл for, скорее всего, будет работать (намного) лучше при итерации по большим коллекциям элементов. Например, вы можете написать это так:

let test = $('input'); 
for(let i = 0; i < test.length; i++){ 
    console.log(test[i].checked) 
}

Далее, for ... in будет работать, но 1) chkbox будет индексом флажка в коллекции и 2) в отличие от моего первого for... пример, где я всегда буду целочисленным индексом, for...in это зациклит все свойства возвращенного объекта JQuery. Вы можете использовать hasOwnProperty(i), чтобы отфильтровать унаследованные свойства, подобные этому;

test = $('input'); 
for(let i in test){ 
    if(!test.hasOwnProperty(i)) { 
        continue ; 
    } 
    console.log(test[i].checked) 
}

Answer 3

Используйте функцию jQuery.each (): https://api.jquery.com/jQuery.each/

jQuery.each(jQuery("#dialog-message input[type='checkbox']"), function(index, chkbox) {
  alert(chkbox.val() + " " + chkbox.is("checked"));
});