jQuery: возвращать значение флажка в виде массива?

Question

Это поставило меня в тупик.Я могу легко получить значение множественного выбора в виде массива и передать его в запрос ajax:

<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
  <option value="AFG">Afghanistan</option>
  <etc>
...
$countries_input = $("#countries");
var countries = $countries_input.val();
$.ajax({
  data: {
    country : countries,
    ...
  },
  ...
});

, но не могу найти эквивалентный способ получить значения флажка 1005 * с несколькими вариантами выбора.Очевидное не работает:

<input type="checkbox" name="check[]" value="foo1"/>foo1<br/>
<input type="checkbox" name="check[]" value="foo2"/>foo2<br/>
...
var bar = $('input:checkbox[name=check]').val();         // undefined
var bar = $('input:checkbox[name=check[]]').val();       // also undefined
var bar = $('input:checkbox[name=check]:checked').val(); // also undefined

Есть идеи?Спасибо.

Answer 1

Для этого нет встроенной функции jQuery.Вы должны сделать это самостоятельно.Вы можете сделать это достаточно легко с помощью простого цикла:

var vals = []
$('input:checkbox[name="check[]"]').each(function() {
    vals.push(this.value);
});

Или, если вы хотите только проверенные:

var vals = []
$('input:checkbox[name="check[]"]').each(function() {
    if (this.checked) {
        vals.push(this.value);
    }
});

Или вы можете использовать map и get:

var vals = $('input:checkbox[name="check[]"]').map(function() {
    return this.value;
}).get();

Или, если вам нужны только отмеченные:

var vals = $('input:checkbox[name="check[]"]').map(function() {
    return this.checked ? this.value : undefined;
}).get();

---

Примечание 1: jQuery требует значения в селекторе значений атрибута (вид выше) всегда быть в кавычках, хотя на момент написания этой статьи, несмотря на документирование, она все еще слаба в этом.Это jQuery, но в этом случае он вам понадобится и для CSS ( Справочник по CSS2 | Справочник по CSS3 ), потому что ваше значение включает [], которые недопустимыдля значений без кавычек в CSS.(В CSS без кавычек значения должны быть идентификаторами .)

---

Примечание 2: Примечание. Я использовал this.value в функциях итератора выше, чтобы получить значение input, а не $(this).val().Это в значительной степени просто вещь стиля, ни одна не лучше, чем другие со всех точек зрения.this.value более прямолинейный, и если вы вообще знаете DOM (и это должен делать каждый веб-программист), это совершенно ясно.Но, конечно, несмотря на то, что это совершенно надежный кросс-браузер с флажками и большинством других элементов input, он не является надежным кросс-браузером с некоторыми другими полями формы (например, select).$(this).val() более идиоматичен в jQuery-интенсивном приложении, и вам не нужно беспокоиться о том, является ли this input или select.Да, это добавляет накладных расходов, но если у вас их нет тысячи, это не значит, что это будет иметь значение.

Answer 2

• Если вы не знакомы с методом .map(), позвольте мне представить одну из моих любимых. В примере на странице руководства также есть флажки. Метод .get() можно использовать для преобразования коллекции jQuery в объект.

.map (): Передать каждый элемент в текущем сопоставленном наборе через функцию, создание нового объекта jQuery, содержащего возвращаемые значения.

• Другие знания, которые вам нужны, это то, что у вас есть escape [] с обратными слешами внутри селектора атрибута: name=check\[\]]. Редактировать: Конечно, если вы используете стандартный синтаксис селектора атрибутов, проблем не будет: name="check[]"

Что-то вроде этого будет достаточно:

var checkedValues = $('input:checkbox[name="check[]"]:checked').map(function () {
    return $(this).val();
}).get();

jsFiddle Demo

Answer 3

Я думаю, что массивы serialize() и serializeArray() будут работать, но, очевидно, они применяются только к дочерним элементам выбора.

В худшем случае я бы просто использовал map(), чтобы получить массив следующим образом

country : $("your input selector").map(function() {return $(this).val();})