Utilizzo di jquery per ottenere tutte le caselle di controllo selezionate con un determinato nome di classe

So di poter ottenere tutte le caselle di controllo selezionate su una pagina usando questo:

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

Ma ora sto usando questo in una pagina che ha alcune altre caselle di controllo che non voglio includere. Come cambierei il codice sopra per guardare solo le caselle spuntate che hanno una certa classe su di esse?

$('.theClass:checkbox:checked')ti darà tutte le caselle di controllo selezionate con la classe theClass.

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

Un esempio da dimostrare.

:checkboxè un selettore per le caselle di controllo (in effetti, potresti omettere la inputparte del selettore, anche se ho trovato casi di nicchia in cui potresti ottenere strani risultati facendo questo nelle versioni precedenti della libreria. Sono sicuro che sono stati corretti nelle versioni successive). .classè il selettore per l'attributo della classe element che contiene class.

.mapEsempio obbligatorio :

var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));

$('input.yourClass:checkbox:checked').each(function () {
    var sThisVal = $(this).val();
});

Ciò otterrebbe tutte le caselle di controllo del nome della classe "yourClass". Mi piace questo esempio poiché utilizza il selettore jQuery controllato anziché eseguire un controllo condizionale. Personalmente userei anche un array per memorizzare il valore, quindi usarli secondo necessità, come:

var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
    arr.push($(this).val());
});

Se è necessario ottenere il valore di tutte le caselle di controllo selezionate come matrice:

let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.push(this.value);
    });
    return a;
})()

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

Non sono sicuro che sia di aiuto per il tuo caso particolare e non sono sicuro che nel tuo caso le caselle di controllo che desideri includere siano tutte parte di un singolo modulo o div o tabella, ma puoi sempre selezionare tutte le caselle di controllo all'interno di un elemento specifico. Per esempio:

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

Quindi, usando il seguente jQuery, passa SOLO attraverso le caselle di controllo all'interno di quell'UL con id = "selettivo":

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

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

Vedi i selettori di classe jQuery .

Puoi usare qualcosa del genere:
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")

Sceglierà i valori di 1 e 3.

Modo semplice per ottenere tutti i valori in un array

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

})();

console.log(valores);

Puoi provare così

let values = (function() {
                let a = [];
                $(".chkboxes:checked").each(function() {
                    a.push($(this).val());
                });
                return a;
            })();

<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

So che questo ha già un sacco di ottime risposte su questa domanda, ma l'ho trovato mentre navigavo e lo trovo davvero facile da usare. Ho pensato di condividere per chiunque altro alla ricerca.

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);
    });
});

Riferimento: "Controlla tutto" più semplice con jQuery

$(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');
        }
    });
});

$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()