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
}
Sarfraz
źródło
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" />

Alain Tiemblo
źródło
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;
RDK
źródło
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/

Reza
źródło
.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”

Greg A.
źródło
14
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
Nalan Madheswaran
źródło
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);
    });
Jaskaran singh Rajal
źródło
10

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

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

Daje true/false

Kevin Shea
źródło
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

Kamal
źródło
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);

Josh Crozier
źródło
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;
            })()
Faraz Kelhini
źródło
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
});
ttrasn
źródło
0

Użyj następującego kodu:

$('input[name^=CheckBoxInput]').val();
Myint Thu Lwin
źródło
0
$('.class[value=3]').prop('checked', true);
Jacksonit.org
źródło
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>
Hayrullah Cansu
źródło
-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>
Kuldeep Mishra
źródło
-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);
hoogw
źródło