Wie kann ich in jQuery einen Checkbox-Wert erhalten?
Um den Wert des Value-Attributs abzurufen, können Sie Folgendes tun:
$("input[type='checkbox']").val();
Wenn Sie eine class
oder id
für sie festgelegt haben, können Sie:
$('#check_id').val();
$('.check_class').val();
Dies gibt jedoch den gleichen Wert zurück, unabhängig davon, ob er markiert ist oder nicht. Dies kann verwirrend sein, da er sich vom übergebenen Formularverhalten unterscheidet.
Um zu prüfen, ob es markiert ist oder nicht, machen Sie Folgendes:
if ($('#check_id').is(":checked"))
{
// it is checked
}
Diese zwei 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" />
Versuchen Sie diese kleine Lösung:
$("#some_id").attr("checked") ? 1 : 0;
oder
$("#some_id").attr("checked") || 0;
Die einzigen korrekten Methoden zum Abrufen eines Kontrollkästchens lauten wie folgt
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
wie in den offiziellen Dokumentationen auf der jQuery-Website erläutert. Die übrigen Methoden haben nichts mit der Eigenschaft property des Kontrollkästchens zu tun. Sie überprüfen das Attribut, dh sie prüfen den Anfangsstatus des Kontrollkästchens, als es geladen wurde. Also kurz gesagt:
elem.checked
). Wenn Sie sich auf jQuery verlassen möchten, können Sie $(elem).prop("checked")
verwenden.$(elem).is(":checked")
der richtige Weg.Die Antworten sind irreführend. Bitte überprüfen Sie selbst:
Nur um Dinge zu klären:
$('#checkbox_ID').is(":checked")
Gibt 'true' oder 'false' zurück
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
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);
});
Einfach, aber effektiv und setzt voraus, dass die Checkbox gefunden wird:
$("#some_id")[0].checked;
Gibt true
/false
Trotz der Tatsache, dass diese Frage nach einer jQuery-Lösung fragt, ist hier eine reine JavaScript-Antwort, da sie von niemandem erwähnt wurde.
Wählen Sie einfach das Element aus und rufen Sie die checked
-Eigenschaft auf (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 change
-Ereignis:
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
alert(this.checked);
});
<input type="checkbox"/>
Um markierte Elemente auszuwählen, verwenden Sie die Pseudo-Klasse :checked
(input[type="checkbox"]:checked
).
Hier ist ein Beispiel, das überprüfte input
-Elemente durchläuft und ein zugeordnetes Array der Namen des geprüften Elements zurückgibt.
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
<div class="parent">
<input type="checkbox" name="name1" />
<input type="checkbox" name="name2" />
<input type="checkbox" name="name3" checked="checked" />
<input type="checkbox" name="name4" checked="checked" />
<input type="checkbox" name="name5" />
</div>
//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
So erhalten Sie den Wert von alle markierten Kontrollkästchen als Array:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.Push(this.value);
});
return a;
})()
Verwenden Sie den folgenden Code:
$('input[name^=CheckBoxInput]').val();
$('.class[value=3]').prop('checked', true);
<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>
Bis heute, 2018, ist die Aufmerksamkeit gerade auf die im Laufe der Jahre wechselnde API zurückzuführen. removeAttr sind verunglimpft 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);