it-swarm.com.de

Rufen Sie den Checkbox-Wert in jQuery ab

Wie kann ich in jQuery einen Checkbox-Wert erhalten?

418
maztt

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
}
817
Sarfraz

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" />
188
Alain Tiemblo

Versuchen Sie diese kleine Lösung: 

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

oder

$("#some_id").attr("checked") || 0;
54
RDK

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:

  • Wenn Sie über das Element verfügen und wissen, dass es sich um ein Kontrollkästchen handelt, können Sie dessen Eigenschaften einfach lesen und benötigen dafür keine jQuery (d. H. elem.checked). Wenn Sie sich auf jQuery verlassen möchten, können Sie $(elem).prop("checked") verwenden.
  • Wenn Sie den Wert beim ersten Laden des Elements (d. H. Des Standardwerts) kennen (oder vergleichen) müssen, ist $(elem).is(":checked") der richtige Weg.

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

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

25
Reza

Nur um Dinge zu klären:

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

Gibt 'true' oder 'false' zurück

14
Greg A
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
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);
    });
10

Einfach, aber effektiv und setzt voraus, dass die Checkbox gefunden wird:

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

Gibt true/false

7
Kevin Shea

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.

Ohne jQuery:

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.

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

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>

6
Josh Crozier
//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

5
Kamal

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;
            })()
2
Faraz Kelhini

Verwenden Sie den folgenden Code:

$('input[name^=CheckBoxInput]').val();
1
Myint Thu Lwin
$('.class[value=3]').prop('checked', true);
1
Jacksonit.org
<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>
0
Kuldeep Mishra

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);
0
hoogw