Abrufen des Kontrollkästchenwerts in jQuery

534

Wie kann ich den Wert eines Kontrollkästchens in jQuery abrufen?

Maztt
quelle

Antworten:

1061

Um den Wert des Value-Attributs zu erhalten, können Sie Folgendes tun:

$("input[type='checkbox']").val();

Oder wenn Sie ein classoder iddafür eingestellt haben, können Sie:

$('#check_id').val();
$('.check_class').val();

Dies wird jedoch das gleiche zurückgeben Wert zurück, unabhängig davon, ob er aktiviert ist oder nicht. Dies kann verwirrend sein, da er sich vom Verhalten des übermittelten Formulars unterscheidet.

Um zu überprüfen, ob es aktiviert ist oder nicht, gehen Sie wie folgt vor:

if ($('#check_id').is(":checked"))
{
  // it is checked
}
Sarfraz
quelle
3
Was macht das erste Beispiel, wenn die Seite mehrere Kontrollkästchen enthält? Übrigens kann es kürzer geschrieben werden $("input:checkbox"). Außerdem scheint es einen Tippfehler in der Klassenauswahl zu geben ...
Jawa
1
@Jawa: Das erste war nur ein Beispiel, um die Syntax zu zeigen und danke für diesen Tippfehler.
Sarfraz
136
Wenn ich es $($0).val()in Chrome versuche und das Kontrollkästchen deaktiviere, ist die Antwort "Ein", obwohl sie nicht aktiviert ist. Aber $($0).is(":checked")gibt den richtigen Wert.
Adrien
2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] bietet in modernen Browsern eine bessere Leistung als :checkbox.
TrueWill
3
Ersetzen $('#check_id').val();, $('#check_id').is(":checked");um den Wert true oder false zurückzugeben.
Matheus Miranda
228

Diese beiden Möglichkeiten funktionieren:

  • $('#checkbox').prop('checked')
  • $('#checkbox').is(':checked')(danke @mgsloan)

$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />

Alain Tiemblo
quelle
9
.is ('geprüft') hat nicht funktioniert, weil es sein sollte .is (': geprüft')
mgsloan
Vielen Dank für Ihre Antwort. Dies ist eine hochmoderne Antwort mit der Funktion jQuery prop ()
Thomas.Benz
58

Probieren Sie diese kleine Lösung aus:

$("#some_id").attr("checked") ? 1 : 0;

oder

$("#some_id").attr("checked") || 0;
RDK
quelle
Oder !! ($ ("# some_id"). Attr ("geprüft"))
COOLGAMETUBE
34

Die einzig richtige Möglichkeit, den Wert eines Kontrollkästchens abzurufen, ist die folgende

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) ) 

wie in den offiziellen Dokumentationen auf der Website von jQuery erläutert. Der Rest der Methoden hat nichts mit der Eigenschaft des Kontrollkästchens zu tun. Sie überprüfen das Attribut. Dies bedeutet, dass sie den Anfangszustand des Kontrollkästchens beim Laden testen. Also kurz gesagt:

  • Wenn Sie das Element haben und wissen, dass es sich um ein Kontrollkästchen handelt, können Sie einfach seine Eigenschaft lesen und benötigen dafür keine jQuery (dh elem.checked) oder können es verwenden, $(elem).prop("checked")wenn Sie sich auf jQuery verlassen möchten.
  • Wenn Sie den Wert kennen (oder vergleichen) müssen, als das Element zum ersten Mal geladen wurde (dh den Standardwert), ist dies die richtige Vorgehensweise $(elem).is(":checked").

Die Antworten sind irreführend. Bitte überprüfen Sie unten selbst:

http://api.jquery.com/prop/

Reza
quelle
.is(":checked")und .prop(":checked")arbeiten das gleiche für mich w / jQuery 1.10.0
Josh
23

Nur um die Dinge zu klären:

$('#checkbox_ID').is(":checked")

Gibt "wahr" oder "falsch" zurück

Greg A.
quelle
14
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
Nalan Madheswaran
quelle
funktioniert nicht. Möglicherweise benötigen Sie eine Spalte, bevor Sie das Kontrollkästchen ": Überprüft"
aktivieren
9
.val () funktioniert nicht. Gibt 'on' zurück, unabhängig davon, ob es aktiviert ist.
Michael Cole
11
jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });
Jaskaran singh Rajal
quelle
10

Einfach, aber effektiv und setzt voraus, dass Sie wissen, dass das Kontrollkästchen gefunden wird:

$("#some_id")[0].checked;

Gibt true/false

Kevin Shea
quelle
9
//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey

Beispiel
Demo

Kamal
quelle
5

Trotz der Tatsache, dass diese Frage nach einer jQuery-Lösung fragt, ist hier eine reine JavaScript-Antwort, da niemand sie erwähnt hat.

Ohne jQuery:

Wählen Sie einfach das Element aus und greifen Sie auf die checkedEigenschaft zu (die einen Booleschen Wert zurückgibt).

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);
<input type="checkbox"/>


Hier ist ein kurzes Beispiel für das Anhören des changeEreignisses:

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});
<input type="checkbox"/>


Verwenden Sie die :checkedPseudoklasse ( input[type="checkbox"]:checked), um markierte Elemente auszuwählen .

Hier ist ein Beispiel, das über überprüfte inputElemente iteriert und ein zugeordnetes Array der Namen der überprüften Elemente zurückgibt.

Beispiel hier

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

Josh Crozier
quelle
1
Dies beantwortet die Frage nicht.
Michael Cole
@MichaelCole - Ich habe die Frage gerade noch einmal gelesen (3 Jahre später) und es sieht so aus, als würde dies tatsächlich die Frage beantworten.
Josh Crozier
1
"Wie kann ich den Wert eines Kontrollkästchens in jQuery abrufen?" -> "Trotz der Tatsache, dass diese Frage nach einer jQuery-Lösung fragt ... bla bla bla". Es ist eine Seifenkisten-Antwort, ähnlich wie andere tatsächliche Antworten, und deshalb habe ich sie abgelehnt.
Michael Cole
1
@ MichaelCole - Fair genug, Feedback wird immer geschätzt. Die ursprüngliche Absicht dieser Antwort war es anzuzeigen, dass jQuery in trivialen Fällen wie diesen vermieden werden kann, wenn die checkedEigenschaft für das native DOM-Element leicht zugänglich ist. Einige der Leute, die nach solchen Fragen / Antworten suchen, sind sich im Allgemeinen nicht bewusst, dass jQuery manchmal nicht notwendig ist. Mit anderen Worten, engstirnige Menschen sind nicht die Zielgruppe für diese Antwort.
Josh Crozier
2

So erhalten Sie den Wert aller aktivierten Kontrollkästchen als Array:

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()
Faraz Kelhini
quelle
2

um den Wert des aktivierten Kontrollkästchens zu erhalten in jquery:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

in pure js:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});
ttrasn
quelle
0

Verwenden Sie den folgenden Code:

$('input[name^=CheckBoxInput]').val();
Myint Thu Lwin
quelle
0
$('.class[value=3]').prop('checked', true);
Jacksonit.org
quelle
1
Die Frage ist, wie man den Wert erhält und nicht, wie man etwas mit einem bestimmten Standardwert überprüft.
Quentin
0

Der beste Weg ist $('input[name="line"]:checked').val()

Außerdem können Sie ausgewählten Text erhalten $('input[name="line"]:checked').text()

Fügen Sie Ihren Optionsfeldeingaben ein Wertattribut und einen Namen hinzu. Stellen Sie sicher, dass alle Eingaben das gleiche Namensattribut haben.

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>
Hayrullah Cansu
quelle
-1
<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>
Kuldeep Mishra
quelle
-1

Nur Aufmerksamkeit, ab heute, 2018, da sich die API im Laufe der Jahre geändert hat. removeAttr sind beraubt und funktionieren NICHT mehr!

Jquery Aktivieren oder deaktivieren Sie ein Kontrollkästchen:

Schlecht, funktioniert nicht mehr.

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

Stattdessen sollten Sie Folgendes tun:

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);
hoogw
quelle