Dapatkan nilai kotak centang di jQuery


Jawaban:


1062

Untuk mendapatkan nilai dari atribut Value, Anda dapat melakukan sesuatu seperti ini:

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

Atau jika Anda telah menetapkan classatau iduntuk itu, Anda dapat:

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

Namun ini akan mengembalikan nilai yang sama apakah itu dicentang atau tidak, ini dapat membingungkan karena berbeda dengan perilaku formulir yang dikirimkan.

Untuk memeriksa apakah dicentang atau tidak, lakukan:

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

3
Apa yang dilakukan contoh pertama jika ada beberapa kotak centang pada halaman? Btw, itu bisa ditulis dengan cara yang lebih pendek $("input:checkbox"). Juga, sepertinya ada kesalahan ketik pada pemilih kelas ...
Jawa

1
@Jawa: Yang pertama hanya contoh untuk menunjukkan sintaks dan terima kasih untuk kesalahan ketik itu.
Sarfraz

136
Jika saya mencoba $($0).val()di Chrome, dan hapus centang pada kotak centang, jawabannya adalah "aktif" meskipun tidak dicentang. Tetapi $($0).is(":checked")mengembalikan nilai yang benar.
Adrien

2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] memiliki kinerja yang lebih baik di browser modern daripada :checkbox.
TrueWill

3
Ganti $('#check_id').val();untuk $('#check_id').is(":checked");mengembalikan nilai benar atau salah.
Matheus Miranda

228

2 cara itu bekerja:

  • $('#checkbox').prop('checked')
  • $('#checkbox').is(':checked')(terima kasih @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 ('checked') tidak berfungsi karena seharusnya .is (': checked')
mgsloan

Terima kasih atas jawaban Anda. Ini adalah jawaban canggih dengan fungsi jQuery prop ()
Thomas.Benz

58

Coba solusi kecil ini:

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

atau

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

Atau !! ($ ("# some_id"). Attr ("checked"))
COOLGAMETUBE

34

Satu-satunya cara yang benar untuk mengambil nilai kotak centang adalah sebagai berikut

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

seperti yang dijelaskan dalam dokumentasi resmi di situs web jQuery. Sisa dari metode tidak ada hubungannya dengan properti dari kotak centang, mereka memeriksa atribut yang berarti mereka menguji keadaan awal kotak centang ketika itu dimuat. Singkatnya:

  • Ketika Anda memiliki elemen dan Anda tahu itu adalah kotak centang, Anda cukup membaca propertinya dan Anda tidak perlu jQuery untuk itu (yaitu elem.checked) atau Anda dapat menggunakan $(elem).prop("checked")jika Anda ingin mengandalkan jQuery.
  • Jika Anda perlu tahu (atau membandingkan) nilai saat elemen pertama kali dimuat (yaitu nilai default) cara yang benar untuk melakukannya adalah $(elem).is(":checked").

Jawabannya menyesatkan, Silakan periksa di bawah ini sendiri:

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


.is(":checked")dan .prop(":checked")bekerja sama untuk saya w / jQuery 1.10.0
Josh

23

Hanya untuk mengklarifikasi hal-hal:

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

Akan mengembalikan 'benar' atau 'salah'


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

tidak bekerja. Anda mungkin memerlukan kolom sebelum dicentang ': dicentang'
bergunaBee

9
.val () tidak berfungsi. Mengembalikan 'aktif' terlepas dari yang dicentang.
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

Sederhana namun efektif dan menganggap Anda tahu bahwa kotak centang akan ditemukan:

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

Memberi 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

Contoh
Demo


5

Terlepas dari kenyataan bahwa pertanyaan ini meminta solusi jQuery, berikut ini adalah jawaban JavaScript murni karena tidak ada yang menyebutkannya.

Tanpa jQuery:

Cukup pilih elemen dan akses checkedproperti (yang mengembalikan boolean).

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

alert(checkbox.checked);
<input type="checkbox"/>


Berikut adalah contoh cepat mendengarkan changeacara:

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


Untuk memilih elemen yang diperiksa, gunakan :checkedkelas pseudo ( input[type="checkbox"]:checked).

Berikut adalah contoh yang mengulangi inputelemen yang diperiksa dan mengembalikan array yang dipetakan dari nama elemen yang diperiksa.

Contoh Di Sini

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
Ini tidak menjawab pertanyaan.
Michael Cole

@MichaelCole - Saya baru saja membaca ulang pertanyaannya (3 tahun kemudian) dan sepertinya ini memang menjawab pertanyaan, jadi jangan ragu untuk menjelaskannya.
Josh Crozier

1
"Bagaimana saya bisa mendapatkan nilai kotak centang di jQuery?" -> "Terlepas dari kenyataan bahwa pertanyaan ini meminta solusi jQuery ... bla bla bla". Ini adalah jawaban dari kotak sabun, seperti jawaban aktual lainnya, dan itulah sebabnya saya menurunkannya.
Michael Cole

1
@MichaelCole - Cukup adil, umpan balik selalu dihargai. Maksud asli dari jawaban ini adalah untuk menunjukkan bahwa jQuery dapat dihindari dalam kasus sepele seperti ini ketika checkedproperti mudah diakses pada elemen DOM asli. Beberapa orang yang mencari pertanyaan / jawaban seperti ini pada umumnya tidak menyadari fakta bahwa jQuery kadang tidak diperlukan. Dengan kata lain, orang yang berpikiran sempit bukanlah target demografis untuk jawaban ini.
Josh Crozier

2

Berikut ini cara mendapatkan nilai dari semua kotak centang yang dicentang sebagai array:

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

2

untuk mendapatkan nilai kotak centang yang dicentang di 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
});

di 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
Pertanyaannya adalah bertanya bagaimana cara mendapatkan nilai bukan bagaimana memeriksa sesuatu dengan nilai default tertentu.
Quentin

0

Cara terbaik adalah $('input[name="line"]:checked').val()

Dan juga Anda bisa mendapatkan teks yang dipilih $('input[name="line"]:checked').text()

Tambahkan atribut nilai dan nama ke input tombol radio Anda. Pastikan semua input memiliki atribut nama yang sama.

<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

Hanya perhatian, sampai hari ini, 2018, karena api berubah selama bertahun-tahun. removeAttr dihilangkan, TIDAK bekerja lagi!

Jquery Periksa atau hapus centang pada kotak centang:

Buruk, tidak bekerja lagi.

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

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

Sebaliknya yang harus Anda lakukan:

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.