Verwenden von jquery, um alle aktivierten Kontrollkästchen mit einem bestimmten Klassennamen abzurufen


215

Ich weiß, dass ich damit alle aktivierten Kontrollkästchen auf einer Seite abrufen kann:

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

Aber ich verwende dies jetzt auf einer Seite, die einige andere Kontrollkästchen enthält, die ich nicht einschließen möchte. Wie würde ich den obigen Code ändern, um nur aktivierte Kontrollkästchen mit einer bestimmten Klasse anzuzeigen?


Soll ich den Titel aktualisieren, um zu sagen, classanstatt name?
Russ Cam

@ Russell Cam - bereits fertig
Leora

$ ('input [type = checkbox] :checked') funktioniert auch.
Super cool

Antworten:


392

$('.theClass:checkbox:checked')gibt Ihnen alle aktivierten Kontrollkästchen mit der Klasse theClass.


8
Nett. Außerdem erhält $ ('. TheClass: checkbox: not (: checked)') alle nicht aktivierten.
Venugopal M

Kann ich dies für alle Kontrollkästchen mit Namen tun?
FluffyBeing

Wie kann ich eine weitere Klasse für markierte Elemente hinzufügen? Ich möchte den Rand der markierten Eingabeelemente anzeigen.
Najam Us Saqib

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

Ein Beispiel zur Demonstration.

:checkboxist ein Selektor für Kontrollkästchen (in der Tat könnten Sie den inputTeil des Selektors weglassen , obwohl ich Nischenfälle gefunden habe, in denen Sie in früheren Versionen der Bibliothek seltsame Ergebnisse erzielen würden. Ich bin sicher, dass sie in späteren Versionen behoben sind). .classist der Selektor für das Elementklassenattribut, das enthält class.


9
Jquery notes on: checkbox empfiehlt, bei [type = "checkbox"] zu bleiben. $ ('[type = "checkbox"]. class') .... oder $ ('input [type = "checkbox"]. class')
TSmith

@ TSmith hast du eine Referenz?
Russ Cam

9
Ich habe das von hier aus gelesen: api.jquery.com/checkbox-selector ... unter "Additional Notes"
TSmith

72

Obligatorisches .mapBeispiel:

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

3
$ ('input.theClass: checked'). map (function () {return this.value}). get (). join (',');
Fedir RYKHTIK

@Fedir: Ihr Befehl gibt on,onals Ergebnis ("Ein" für jedes aktivierte Kontrollkästchen)
Jay

@ Jay Sie müssen die Wertattribute Ihrer Kontrollkästchen setzen, um ihren Wert in einer durch Koma getrennten Zeichenfolge zu erhalten
Kamran Ali

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

Dies würde alle Kontrollkästchen des Klassennamens "yourClass" erhalten. Ich mag dieses Beispiel, da es den überprüften jQuery-Selektor verwendet , anstatt eine bedingte Prüfung durchzuführen. Persönlich würde ich auch ein Array verwenden, um den Wert zu speichern, und sie dann nach Bedarf verwenden, wie:

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

Wenn die Werte in einem Array gespeichert werden müssten, .mapkönnte dies eine angenehmere Alternative sein, wie die Antwort von karim79 zeigt.
Duplode

1
Danke :) Ich musste alle aktivierten Kontrollkästchen finden und Ihre Antwort macht das.
Ufk

13

Wenn Sie den Wert aller aktivierten Kontrollkästchen als Array abrufen müssen:

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

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

8

Ich bin nicht sicher, ob es für Ihren speziellen Fall hilfreich ist, und ich bin nicht sicher, ob in Ihrem Fall die Kontrollkästchen, die Sie nur einschließen möchten, alle Teil eines einzelnen Formulars oder Divs oder einer Tabelle sind, aber Sie können immer alle Kontrollkästchen aktivieren innerhalb eines bestimmten Elements. Beispielsweise:

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

Dann geht es mit der folgenden jQuery NUR durch die Kontrollkästchen innerhalb dieser UL mit id = "selektiv":

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


7

Sie können so etwas verwenden:
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")


Es werden Werte von 1 und 3 gewählt.


Dies ist die beste Antwort.
Marcos Buarque

7

Einfacher Weg, um alle Werte in ein Array zu bekommen

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

})();

console.log(valores);

7

Sie können es so versuchen

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

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


3

Ich weiß, dass dies bereits eine Reihe großartiger Antworten auf diese Frage gibt, aber ich habe dies beim Stöbern gefunden und finde es sehr einfach zu bedienen. Ich dachte, ich würde es für alle anderen teilen, die es suchen.

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

Referenz: Einfachste "Alle überprüfen" mit jQuery


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

Bitte fügen Sie einen Kommentar hinzu, um Ihre Antwort zu erläutern, damit es für Uneingeweihte leichter verständlich wird
Simas Joneliunas

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

1
Bitte erläutern Sie, worum es in diesem Code geht. Es wird anderen helfen zu verstehen
Shafin Mahmud
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.