Usando jquery para obter todas as caixas de seleção marcadas com um determinado nome de classe

215

Eu sei que posso obter todas as caixas de seleção em uma página usando este:

$('input[type=checkbox]').each(function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

Mas agora estou usando isso em uma página que possui outras caixas de seleção que não quero incluir. Como eu alteraria o código acima para olhar apenas para as caixas de seleção marcadas com uma determinada classe?

leora
fonte
Devo atualizar o título para dizer em classvez de name?
Russ Cam
@Russ Cam - já está feito
leora 27/03
$ ('input [type = checkbox] :checked') também funcionará.
Super legal

Respostas:

392

$('.theClass:checkbox:checked')lhe dará todas as caixas de seleção marcadas com a classe theClass.

Cokegod
fonte
8
Agradável. Além disso, $ ('. TheClass: checkbox: not (: selected)') receberá todos os itens não marcados.
Venugopal M
Posso fazer isso para todas as caixas de seleção com nome?
FluffyBeing
Como posso adicionar outra classe nos elementos marcados? Eu quero mostrar borda em elementos de entrada verificados.
Najam Us Saqib
120
$('input:checkbox.class').each(function () {
       var sThisVal = (this.checked ? $(this).val() : "");
  });

Um exemplo para demonstrar.

:checkboxé um seletor de caixas de seleção (na verdade, você pode omitir a inputparte do seletor, embora eu tenha encontrado casos de nicho em que você obteria resultados estranhos ao fazer isso em versões anteriores da biblioteca. Tenho certeza de que eles são corrigidos em versões posteriores). .classé o seletor para o atributo da classe de elemento que contém class.

Russ Cam
fonte
9
Jquery observa sobre: ​​a caixa de seleção recomenda ficar com [type = "checkbox"]. $ ('[type = "checkbox"]. class') .... ou $ ('input [type = "checkbox"]. class')
TSmith
@TSmith você tem uma referência?
Russ Cam
9
Eu li isso aqui: api.jquery.com/checkbox-selector ... em "Notas adicionais"
TSmith
72

.mapExemplo obrigatório :

var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));
karim79
fonte
3
$ ('input.theClass: marcada'). map (function () {retorna this.value}). get (). join (',');
Fedir RYKHTIK
@Fedir: o seu comando dá on,oncomo resultado ( 'on' para cada caixa de seleção marcada)
Jay
@Jay Você precisa definir os atributos de valor de suas caixas de seleção para obter o seu valor em coma separados corda
Kamran Ali
21
$('input.yourClass:checkbox:checked').each(function () {
    var sThisVal = $(this).val();
});

Isso obteria todas as caixas de seleção do nome da classe "suaClasse". Eu gosto deste exemplo, pois ele usa o seletor jQuery marcado em vez de fazer uma verificação condicional. Pessoalmente, eu também usaria uma matriz para armazenar o valor e depois usá-los conforme necessário, como:

var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
    arr.push($(this).val());
});
alienriver49
fonte
Se houvesse necessidade de armazenar os valores em uma matriz, .mappoderia ser uma alternativa mais agradável, como ilustrado pela resposta de karim79.
Duplode
1
obrigado :) eu precisava encontrar todas as caixas de seleção marcadas e sua resposta faz isso.
ufk
13

Se você precisar obter o valor de todas as caixas de seleção marcadas como uma matriz:

let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.push(this.value);
    });
    return a;
})()
Faraz Kelhini
fonte
10
 $('input.theclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : "");
 });
Alpes
fonte
8

Não tenho certeza se isso ajuda para o seu caso específico e não sei se, no seu caso, as caixas de seleção que você deseja incluir fazem parte de um único formulário ou div ou tabela, mas você sempre pode selecionar todas as caixas de seleção dentro de um elemento específico. Por exemplo:

<ul id="selective">
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
</ul>

Em seguida, usando o jQuery a seguir, ele APENAS percorre as caixas de seleção dentro desse UL com id = "seletivo":

$('#selective input:checkbox').each(function () {
 var sThisVal = (this.checked ? $(this).val() : "");
});
Florian Mertens
fonte
7
 $('input.myclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : ""); });

Veja seletores de classe jQuery .

Liza Daly
fonte
7

Você pode usar algo como isto:
HTML:

<div><input class="yourClass" type="checkbox" value="1" checked></div>
<div><input class="yourClass" type="checkbox" value="2"></div>
<div><input class="yourClass" type="checkbox" value="3" checked></div>
<div><input class="yourClass" type="checkbox" value="4"></div>


JQuery:

$(".yourClass:checkbox").filter(":checked")


Ele escolherá valores de 1 e 3.

Philip Voloshin
fonte
Esta é a melhor resposta.
Marcos Buarque
7

Maneira simples de obter todos os valores em uma matriz

var valores = (function () {
    var valor = [];
    $('input.className[type=checkbox]').each(function () {
        if (this.checked)
            valor.push($(this).val());
    });
    return valor;

})();

console.log(valores);
Caike Bispo
fonte
7

Você pode tentar assim

let values = (function() {
                let a = [];
                $(".chkboxes:checked").each(function() {
                    a.push($(this).val());
                });
                return a;
            })();
Bablu Ahmed
fonte
4
<input type="checkbox" id="Checkbox1" class = "chk" value = "1" />
<input type="checkbox" id="Checkbox2" class = "chk" value = "2" />
<input type="checkbox" id="Checkbox3" class = "chk" value = "3" />
<input type="checkbox" id="Checkbox4" class = "chk" value = "4" />
<input type="button" id="demo" value = "Demo" />

<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $("#demo").live("click", function () {
        $("input:checkbox[class=chk]:checked").each(function () {
            alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
        });
    });
</script>

http://www.jqueryfaqs.com/Articles/Get-values-of-all-checked-checkboxes-by-class-name-using-jQuery.aspx

Debendra Dash
fonte
3

Eu sei que isso já tem um monte de ótimas respostas para essa pergunta, mas eu achei isso enquanto navegava e acho realmente fácil de usar. Pensei em compartilhar para qualquer um que estivesse procurando.

HTML:

<fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

jQuery:

$(function () {
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
});

Referência: "Check All" mais fácil com jQuery

Tony
fonte
1
$(document).ready(function(){
    $('input.checkD[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $(this).val('true');
        }
        else if($(this).prop("checked") == false){
            $(this).val('false');
        }
    });
});
Kapil Sarvesh
fonte
considere adicionar um comentário para explicar sua resposta, para que seja mais fácil entender os não iniciados
Simas Joneliunas
-1
$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()
KEERTHI KN
fonte
1
por favor, explique sobre o que é esse código. Ajudará outros a entender
Shafin Mahmud 17/03