Uzyskaj wartość pola wyboru w jQuery


Odpowiedzi:


1059

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
}

3
Co robi pierwszy przykład, jeśli na stronie znajduje się wiele pól wyboru? Przy okazji, można to napisać w krótszy sposób $("input:checkbox"). Wydaje się też, że w selektorze klas jest literówka ...
Jawa

1
@Jawa: Pierwszy był tylko przykładem pokazującym składnię i podziękowania za tę literówkę.
Sarfraz

136
Jeśli spróbuję $($0).val()w Chrome i odznaczę pole wyboru, odpowiedź jest „włączona”, nawet jeśli nie jest zaznaczona. Ale $($0).is(":checked")zwraca właściwą wartość.
Adrien,

2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] ma lepszą wydajność w nowoczesnych przeglądarkach niż :checkbox.
TrueWill

3
Zamień, $('#check_id').val();aby $('#check_id').is(":checked");zwrócić wartość true lub false.
Matheus Miranda

227

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


9
.is („zaznaczone”) nie działało, ponieważ powinno być .is („: zaznaczone”)
mgsloan

Dziękuję za Twoją odpowiedź. To jest najnowsza odpowiedź z funkcją prop () jQuery
Thomas.Benz

58

Wypróbuj to małe rozwiązanie:

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

lub

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

Lub !! ($ („# some_id”). Attr („zaznaczony”))
COOLGAMETUBE

34

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/


.is(":checked")i .prop(":checked")pracują dla mnie tak samo w / jQuery 1.10.0
Josh

23

Żeby wyjaśnić:

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

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


14
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

nie działa. może być potrzebna kolumna przed zaznaczeniem „: sprawdzone”
przydatne,

9
.val () nie działa. Zwraca „on” bez względu na zaznaczone.
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);
    });

10

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

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

Daje true/false


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

Przykładowe
demo


5

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


1
To nie odpowiada na pytanie.
Michael Cole,

@MichaelCole - Właśnie przeczytałem pytanie (3 lata później) i wygląda na to, że to rzeczywiście odpowiada na pytanie, więc nie krępuj się rozwinąć.
Josh Crozier,

1
„Jak mogę uzyskać wartość pola wyboru w jQuery?” -> „Pomimo tego, że to pytanie wymaga rozwiązania jQuery… bla bla bla”. To odpowiedź na pytanie z mydłem, podobnie jak inne rzeczywiste odpowiedzi i dlatego głosowałem za nią.
Michael Cole

1
@MichaelCole - Wystarczająco uczciwe, opinie są zawsze mile widziane. Pierwotnym celem tej odpowiedzi było wskazanie, że jQuery można uniknąć w tak trywialnych przypadkach, jak ta, gdy checkedwłaściwość jest łatwo dostępna w natywnym elemencie DOM. Niektóre osoby, które szukają takich pytań / odpowiedzi, na ogół nie zdają sobie sprawy z tego, że jQuery nie jest czasem konieczne. Innymi słowy, ludzie o wąskich umysłach nie są docelową grupą demograficzną dla tej odpowiedzi.
Josh Crozier

2

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

2

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


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

1
Pytanie brzmi: jak uzyskać wartość, a nie jak sprawdzić coś o określonej wartości domyślnej.
Quentin

0

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>

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

-1

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);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.