Почему мой вызов map () не возвращает ожидаемый результат?
У меня есть форма с тремя флажками:
<form id = "checklist-form" action = "">
<h1>this</h1>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" value = "" id = "check-item0" required = "">
<label class = "form-check-label" for = "check-item0">
One
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" value = "" id = "check-item1" required = "">
<label class = "form-check-label" for = "check-item1">
Two
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" value = "" id = "check-item2" required = "">
<label class = "form-check-label" for = "check-item2">
Three
</label>
</div>
</form>
Я хочу получить значение каждого из флажков, чтобы сохранить их в файле cookie.
На моей странице установлен первый флажок. Два других не отмечены. Я могу использовать jQuery, чтобы увидеть, что установлен первый флажок:
$('#checklist-form input[type = "checkbox"]').first().is(':checked')
// > true
Точно так же я вижу, что второй элемент не отмечен:
$($('#checklist-form input[type = "checkbox"]')[1]).is(':checked')
// > false
Вместо того, чтобы запрашивать каждый флажок по очереди, я хочу использовать map для возврата массива. Однако мне не очень везет:
$('#checklist-form input[type = "checkbox"]').map(function(el){ return $(el).is(':checked') }).toArray()
// > (3) [false, false, false]
Ожидаю [true, false, false]. Так что я делаю не так? И является ли преобразование состояний флажков в массив полностью правильным подходом, если я хочу сохранить состояние формы в cookie?
Ответы 1
Проблема в том, что вы используете первый аргумент map(), который представляет собой показатель элемента в коллекции, вместо второго аргумента, который является ссылкой на сам элемент:
var arr = $('#checklist-form input[type = "checkbox"]').map(function(i, el) {
return $(el).is(':checked');
}).toArray();
console.info(arr);<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id = "checklist-form" action = "">
<h1>this</h1>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" value = "" id = "check-item0" required = "" checked = "true">
<label class = "form-check-label" for = "check-item0">
One
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" value = "" id = "check-item1" required = "">
<label class = "form-check-label" for = "check-item1">
Two
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" value = "" id = "check-item2" required = "">
<label class = "form-check-label" for = "check-item2">
Three
</label>
</div>
</form>Также обратите внимание, что вы можете получить свойство checked напрямую из элемента и использовать get() вместо toArray(), чтобы немного улучшить производительность логики:
var arr = $('#checklist-form input[type = "checkbox"]').map(function(i, el) {
return el.checked;
}).get();
Или даже, как указал @charlietfl, вы можете отказаться от аргументов, переданных в функцию-обработчик, и использовать ключевое слово this в функции-обработчике, так как оно вызывается с областью предоставленного элемента:
var arr = $('#checklist-form input[type = "checkbox"]').map(function() {
return this.checked;
}).get();
Или
this.checkedи не беспокойтесь о спорах