Abrufen des Kontrollkästchenwerts in jQuery

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

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
}

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

Probieren Sie diese kleine Lösung aus:

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

oder

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

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/

Nur um die Dinge zu klären:

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

Gibt "wahr" oder "falsch" 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 Sie wissen, dass das Kontrollkästchen gefunden wird:

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

Gibt true/false

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

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

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>

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

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

Verwenden Sie den folgenden Code:

$('input[name^=CheckBoxInput]').val();

$('.class[value=3]').prop('checked', true);

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>

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

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