Periksa apakah kotak centang dicentang dengan jQuery

Bagaimana saya dapat periksa apakah kotak centang di kotak centang array diperiksa menggunakan id centang array?

Saya menggunakan kode berikut, tetapi selalu kembali hitungan memeriksa kotak centang terlepas dari id.

``js fungsi isCheckedById(id) { alert(id); var diperiksa = $("input[@id=" + id + "]:diperiksa").panjang; alert(diperiksa);

jika (diperiksa == 0) { return false; } else { return true; } } ``

Mengomentari pertanyaan (7)
$('#' + id).is(":checked")

Yang mendapat jika dicentang.

Untuk array checkbox dengan nama yang sama anda bisa mendapatkan daftar yang diperiksa oleh:

var $boxes = $('input[name=thename]:checked');

Kemudian untuk loop melalui mereka dan melihat apa yang's diperiksa yang dapat anda lakukan:

$boxes.each(function(){
    // Do stuff here with this
});

Untuk menemukan berapa banyak yang diperiksa yang dapat anda lakukan:

$boxes.length;
Komentar (11)
Larutan

Id harus unik dalam dokumen anda, artinya anda tidak't melakukan ini:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Sebaliknya, penurunan ID, kemudian pilih nama mereka, atau yang mengandung unsur:


    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />

Dan sekarang jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
Komentar (5)
$('#checkbox').is(':checked'); 

Kode di atas akan mengembalikan true jika dicentang atau false jika tidak.

Komentar (4)

Semua metode yang berguna:

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

$('#checkbox').prop('checked')

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

Dianjurkan bahwa DOMelement atau inline "ini.diperiksa" harus dihindari bukan jQuery pada metode harus digunakan acara pendengar.

Komentar (0)

kode jQuery untuk memeriksa apakah dicentang atau tidak:

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

Atau:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}
Komentar (4)

konsep Yang paling penting untuk diingat tentang memeriksa atribut bahwa hal itu tidak sesuai dengan memeriksa properti. Atribut benar-benar sesuai dengan defaultChecked properti dan harus digunakan hanya untuk mengatur nilai awal dari checkbox. Diperiksa atribut nilai tidak berubah dengan keadaan centang, sedangkan diperiksa adalah properti bebas-rokok. Oleh karena itu, lintas-browser yang kompatibel-cara untuk menentukan apakah kotak centang dicentang adalah dengan menggunakan properti

Semua metode di bawah ini yang mungkin

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 
Komentar (0)

Anda dapat menggunakan kode ini,

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}
Komentar (0)

Sesuai dengan jQuery dokumentasi ada cara-cara berikut untuk memeriksa jika dicentang atau tidak. Mari kita mempertimbangkan kotak centang untuk contoh (Check Bekerja [jsfiddle][2] dengan contoh)

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

Contoh 1 - Dengan diperiksa

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Contoh 2 - Dengan jQuery ini, CATATAN :diperiksa

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Contoh 3 - Dengan jQuery prop

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Memeriksa Kerja [jsfiddle][2]

Komentar (0)

Anda dapat mencoba ini:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />

<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
Komentar (1)

Anda dapat menggunakan salah satu dari yang berikut dianjurkan kode jquery.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
Komentar (0)

Aku tahu OP ingin jquery tapi dalam kasus saya murni JS adalah jawabannya jadi jika ada yang seperti aku di sini dan tidak memiliki jquery atau tidak ingin menggunakannya - berikut ini adalah JS menjawab:

document.getElementById("myCheck").checked

Mengembalikan true jika input dengan ID myCheck diperiksa dan false jika tidak diperiksa.

Sederhana seperti itu.

Komentar (1)

Anda dapat melakukannya hanya seperti;

[Kerja Biola][1]

HTML

<input id="checkbox" type="checkbox" />

jQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

atau bahkan lebih sederhana;

$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");

Jika checkbox diperiksa itu akan mengembalikan true jika undefined

Komentar (1)

Demo sederhana untuk memeriksa dan menetapkan kotak centang.

[jsfiddle](http://jsfiddle.net/eUK4v/ "teks ini muncul ketika anda mengarahkan mouse di atas")!

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});
Komentar (0)

Hanya untuk mengatakan dalam contoh situasi kotak dialog yang kemudian diverifikasi kotak centang sebelum menutup dialog. Tidak ada di atas dan https://stackoverflow.com/questions/901712/how-do-i-check-if-a-checkbox-is-checked?page=1&tab=active#tab-atas dan https://stackoverflow.com/questions/7960208/jquery-if-checkbox-is-checked tidak muncul untuk bekerja dengan baik.

Di akhir

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

Ini bekerja begitu panggilan kelas maka ID. bukan hanya ID. Mungkin karena bersarang DOM elemen pada halaman ini menyebabkan masalah. Pemecahan masalah di atas.

Komentar (0)

Sebenarnya, menurut jsperf.com, DOM operasi yang tercepat, maka $().prop() diikuti oleh $().adalah()!!

Berikut ini adalah sintaks :

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

Saya pribadi lebih suka .prop(). Tidak seperti .adalah(), Hal ini juga dapat digunakan untuk mengatur nilai.

Komentar (0)

Hal seperti ini dapat membantu

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}
Komentar (0)

Untuk checkbox dengan id


<input id="id_input_checkbox13" type="checkbox">
Komentar (0)

Beralih kotak centang dicentang

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
Komentar (0)

Sejak itu's pertengahan tahun 2019 dan jQuery kadang-kadang mengambil kursi belakang untuk hal-hal seperti VueJS, Bereaksi dll. Berikut ini's vanili murni Javascript onload pendengar pilihan:

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>
Komentar (0)

Menggunakan kode ini anda dapat memeriksa setidaknya salah satu kotak centang dipilih atau tidak dalam berbagai centang kelompok atau dari beberapa kotak centang. Menggunakan ini, anda tidak dapat meminta untuk menghapus Id atau dinamis Id. Kode ini bekerja dengan Id yang sama.

Referensi Link

Check Box 2
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

Check Box 3
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>
Komentar (1)