Получить список проверенных флажков в div, используя jQuery

231

Я хочу получить список имен флажков, которые выбраны в div с определенным идентификатором. Как бы я сделал это с помощью jQuery?

Например, для этого div я хочу получить массив ["c_n_0"; "c_n_3"] или строка "c_n_0; c_n_3"

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="c_n_0" checked="checked" />Option 1
    <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
    <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
    <input id="chkbx_3" type="checkbox" name="c_n_3" checked="checked" />Option 4
</div>

jquery checkbox jquery-selectors Юозас Контвайнис
источник

434

Сочетание двух предыдущих ответов:

var selected = [];
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

Алекс ЛЕ
источник

10

и еще одно комбо: var selected = $ ('# checkboxes input: selected'). map (function (i, el) {return el.name;}). get (); // добавляем .join (';'), чтобы получить комбинированную строку

roberkules

1

@ Алекс LE. Как я могу получить только количество выбранных флажков? Мне просто нужно проверить, установлен ли какой-либо из флажков внутри div или нет.

ashishjmeshram

1

@Ashish. Просто напишите: var count = $ ('# checkboxes input: selected'). Length;

Алекс ЛЭ

2

Ненужный вызов конструктора var selected = new Array();. Лучше (дешевле) сvar selected = [];

Поно

Как мне получить это на changeфункции?

Si8

54

Будет ли это делать?

var selected = [];
$('div#checkboxes input[type=checkbox]').each(function() {
   if ($(this).is(":checked")) {
       selected.push($(this).attr('name'));
   }
});

nikc.org
источник

9

$ (this) .checked не работает. Используйте if ($ (this) .attr ('флажок')) или if ($ (this) .is (': флажок'))

Стефан Штайгер

если .attr('checked')или .prop('checked')или .is(':checked')не работает, попробуйте.get(0).checked

emfi

37

$("#checkboxes").children("input:checked")

даст вам массив самих элементов. Если вам просто нужны имена:

$("#checkboxes").children("input:checked").map(function() {
    return this.name;
});

Corey
источник

2

Я думаю, что должно быть возвращено this.name или return $ (this) .attr ('name');

Янсен Прайс

4

$("#checkboxes :checked").map(...)будет более кратким. Как указывает Янсен, так и должно быть $(this).attr("name"); но я бы рассмотрел простой, this.nameкоторый должен быть таким же совместимым.

Алекс Барретт

1

Это было здорово для простой карты. Я переключился childrenна findболее глубокий взгляд, и мне нужны были такие атрибуты jquery $(this) (и написал этот комментарий, когда я снова приду ...)

goodeye

24

Мне нужно было подсчитать все флажки, которые проверены. Вместо написания цикла я сделал это

$(".myCheckBoxClass:checked").length;

Сравните его с общим количеством флажков, чтобы увидеть, равны ли они. Надеюсь, это поможет кому-то

Усман Шаукат
источник

9

Это работает для меня.

var selecteditems = [];

$("#Div").find("input:checked").each(function (i, ob) { 
    selecteditems.push($(ob).val());
});

Рикардо
источник

6

Вы также можете присвоить им одно и то же имя, чтобы они представляли собой массив , но присваивайте им разные значения :

<div id="checkboxes">
    <input type="checkbox" name="c_n[]" value="c_n_0" checked="checked" />Option 1
    <input type="checkbox" name="c_n[]" value="c_n_1" />Option 2
    <input type="checkbox" name="c_n[]" value="c_n_2" />Option 3
    <input type="checkbox" name="c_n[]" value="c_n_3" checked="checked" />Option 4
</div>

Затем вы можете получить только значения только отмеченных, используя карту :

$('#checkboxes input:checked[name="c_n[]"]')
            .map(function () { return $(this).val(); }).get()

SharpC
источник

0

function listselect() {
                var selected = [];
                $('.SelectPhone').prop('checked', function () {

                    selected.push($(this).val());
                });

                alert(selected.length);

     <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="1" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="2" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="3" />
        <button onclick="listselect()">show count</button>

jamaljaj
источник

0

 var agencias = [];
 $('#Div input:checked').each(function(index, item){
 agencias.push(item.nextElementSibling.attributes.for.nodeValue);
 });

Дэвид Бланко
источник

В чем преимущество этого решения?

Луис Гувея

Получить список проверенных флажков в div, используя jQuery

Ответы: