Uzyskaj wartość pola wyboru w jQuery

Jak mogę uzyskać wartość pola wyboru w jQuery?

Aby uzyskać wartość atrybutu Value, możesz zrobić coś takiego:

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

Lub jeśli ustawiłeś dla niego classlub id, możesz:

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

Jednak zwróci tę samą wartość, niezależnie od tego, czy jest zaznaczona, czy nie, może to być mylące, ponieważ różni się od zachowania formularza przesłanego.

Aby sprawdzić, czy jest zaznaczone, czy nie:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

Te 2 sposoby działają:

• $('#checkbox').prop('checked')
• $('#checkbox').is(':checked')(dzięki @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" />

Wypróbuj to małe rozwiązanie:

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

lub

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

Jedyne prawidłowe sposoby pobierania wartości pola wyboru są następujące

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

jak wyjaśniono w oficjalnych dokumentach na stronie jQuery. Pozostałe metody nie mają nic wspólnego z właściwością pola wyboru, sprawdzają atrybut, co oznacza, że ​​testują stan początkowy pola wyboru, gdy zostało załadowane. W skrócie:

• Gdy masz element i wiesz, że jest to pole wyboru, możesz po prostu przeczytać jego właściwość i nie potrzebujesz do tego jQuery (tj. elem.checked) Lub możesz użyć, $(elem).prop("checked")jeśli chcesz polegać na jQuery.
• Jeśli musisz znać (lub porównywać) wartość, kiedy element został załadowany po raz pierwszy (tj. Wartość domyślną), poprawnym sposobem jest to zrobić $(elem).is(":checked").

Odpowiedzi są mylące, sprawdź sam:

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

Żeby wyjaśnić:

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

Zwróci „prawda” lub „fałsz”

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

Prosty, ale skuteczny i zakłada, że ​​wiesz, że pole wyboru zostanie znalezione:

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

Daje 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

Przykładowe
demo

Pomimo faktu, że to pytanie wymaga rozwiązania jQuery, oto czysta odpowiedź JavaScript, ponieważ nikt o tym nie wspominał.

Bez jQuery:

Wystarczy wybrać element i uzyskać dostęp do checkedwłaściwości (która zwraca wartość logiczną).

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

alert(checkbox.checked);

<input type="checkbox"/>

Oto krótki przykład słuchania changewydarzenia:

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

<input type="checkbox"/>

Aby zaznaczyć zaznaczone elementy, użyj :checkedpseudo-klasy ( input[type="checkbox"]:checked).

Oto przykład, który iteruje sprawdzane inputelementy i zwraca zmapowaną tablicę nazw sprawdzanych elementów.

Przykład tutaj

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>

Oto jak uzyskać wartość wszystkich zaznaczonych pól wyboru jako tablicy:

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

aby uzyskać wartość zaznaczonego pola wyboru w 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
});

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

Użyj następującego kodu:

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

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

Najlepszym sposobem jest $('input[name="line"]:checked').val()

A także możesz uzyskać zaznaczony tekst $('input[name="line"]:checked').text()

Dodaj atrybut wartości i nazwę do danych wejściowych przycisku opcji. Upewnij się, że wszystkie dane wejściowe mają ten sam atrybut nazwy.

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

Tylko uwaga, na dzień dzisiejszy, 2018, ze względu na zmiany interfejsu API na przestrzeni lat. removeAttr są osłabione, NIE działają już!

Jquery Zaznacz lub odznacz pole wyboru:

Źle, już nie działa.

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

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

Zamiast tego powinieneś:

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