Obter uma lista de caixas de seleção marcadas em uma div usando jQuery

231

Quero obter uma lista de nomes de caixas de seleção selecionadas em uma div com determinado ID. Como eu faria isso usando jQuery?

Por exemplo, para esta div, quero obter o array ["c_n_0"; "c_n_3"] ou uma sequência "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

— Juozas Kontvainis
fonte

434

Combinação de duas respostas anteriores:

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

— Alex LE
fonte

10

e outra combinação: var selected = $ ('# checkboxes input: selected'). map (function (i, el) {return el.name;}). get (); // adiciona .join (';') para obter uma string combinada

— roberkules

1

@Alex LE. Como obtenho apenas a contagem das caixas de seleção selecionadas? Eu só preciso verificar se alguma das caixas de seleção dentro da div está marcada ou não.

— Ashishjmeshram

1

@Ashish. Basta escrever: var count = $ ('# checkboxes input: selected'). Length;

— Alex LE

2

Chamada desnecessária do construtor var selected = new Array();. Melhor (mais barato) comvar selected = [];

— Pono 17/03/2014

Como faço para changefuncionar?

— Si8

54

Isso faria?

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

— nikc.org
fonte

9

$ (this) .checked não funciona. Use if ($ (this) .attr ( 'checada')) ou if ($ (this) .é ( ': verificada'))

— Stefan Steiger

se .attr('checked')ou .prop('checked')ou .is(':checked')não funcionar, tente.get(0).checked

— EMFI

37

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

lhe dará uma matriz dos próprios elementos. Se você apenas precisar especificamente dos nomes:

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

— Corey
fonte

2

Eu acho que deveria retornar this.name ou $ (this) .attr ('name');

— Jansen Preço

4

$("#checkboxes :checked").map(...)seria mais conciso. Como Jansen aponta, deveria ser $(this).attr("name"); mas consideraria um simples this.nameque deveria ser igualmente compatível.

— Alex Barrett

1

Isso foi ótimo para o mapa simples. Mudei childrenpara findolhar mais profundo, e precisava jquery atributos tão acostumado $(this) (e escreveu este comentário para quando eu vêm à procura de novo ...)

— goodeye

24

Eu precisava da contagem de todas as caixas de verificação marcadas. Em vez de escrever um loop, eu fiz isso

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

Compare-o com o número total de caixas de seleção para ver se são iguais. Espero que ajude alguém

— Usman Shaukat
fonte

9

Isso funciona para mim.

var selecteditems = [];

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

— Ricardo
fonte

6

Você também pode atribuir a todos o mesmo nome para que sejam uma matriz , mas atribuir valores diferentes :

<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>

Você pode obter apenas o valor dos marcados usando o mapa :

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

— SharpC
fonte

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
fonte

0

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

— David Blanco
fonte

Qual é a vantagem desta solução?

— Luis Gouveia