Dapatkan nilai kotak centang di jQuery

Bagaimana saya bisa mendapatkan nilai kotak centang di jQuery?

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
}

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

Coba solusi kecil ini:

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

atau

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

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/

Hanya untuk mengklarifikasi hal-hal:

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

Akan mengembalikan 'benar' atau 'salah'

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

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

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

Memberi 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

Contoh
Demo

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

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>

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

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

Gunakan kode berikut:

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

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

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>

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

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