Periksa apakah kotak centang dicentang dengan jQuery

Bagaimana saya bisa memeriksa apakah kotak centang dalam array kotak centang dicentang menggunakan id dari array kotak centang?

Saya menggunakan kode berikut, tetapi selalu mengembalikan jumlah kotak centang yang dicentang terlepas dari id.

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

ID harus unik dalam dokumen Anda, artinya Anda tidak boleh melakukan ini:

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

Alih-alih, letakkan ID, lalu pilih menurut nama, atau dengan elemen yang mengandung:

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

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

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;

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

Itu mendapat jika kotak centang dicentang.

Untuk larik kotak centang dengan nama yang sama Anda bisa mendapatkan daftar yang dicentang dengan:

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

Kemudian untuk mengulanginya dan melihat apa yang diperiksa dapat Anda lakukan:

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

Untuk menemukan berapa banyak yang diperiksa, Anda dapat melakukan:

$boxes.length;

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

Kode di atas mengembalikan true jika kotak centang dicentang atau salah jika tidak.

Semua metode berikut bermanfaat:

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

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

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

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

Disarankan bahwa DOMelement atau inline "this.checked" harus dihindari sebagai gantinya jQuery pada metode harus digunakan pendengar acara.

kode jQuery untuk memeriksa apakah kotak centang dicentang atau tidak:

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

Kalau tidak:

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

Konsep yang paling penting untuk diingat tentang atribut yang diperiksa adalah bahwa itu tidak sesuai dengan properti yang diperiksa. Atribut sebenarnya sesuai dengan properti defaultChecked dan harus digunakan hanya untuk mengatur nilai awal kotak centang. Nilai atribut yang dicentang tidak berubah dengan keadaan kotak centang, sedangkan properti yang dicentang tidak. Oleh karena itu, cara yang kompatibel lintas-browser untuk menentukan apakah kotak centang dicentang adalah dengan menggunakan properti

Semua metode di bawah ini dimungkinkan

elem.checked 

$(elem).prop("checked") 

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

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

Sesuai dokumentasi jQuery ada beberapa cara berikut untuk memeriksa apakah kotak centang dicentang atau tidak. Mari kita mempertimbangkan kotak centang misalnya (Periksa Kerja jsfiddle dengan semua 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 dicentang

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

Contoh 2 - Dengan jQuery adalah, CATATAN -: dicentang

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

Periksa jsfiddle Bekerja

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

Anda dapat menggunakan salah satu kode yang direkomendasikan berikut ini oleh jquery.

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

Saya tahu OP ingin jquery tetapi dalam kasus saya JS murni adalah jawabannya jadi jika orang seperti saya ada di sini dan tidak memiliki jquery atau tidak ingin menggunakannya - di sini adalah jawaban JS:

document.getElementById("myCheck").checked

Mengembalikan nilai true jika input dengan ID myCheck dicentang dan false jika tidak dicentang.

Sederhana seperti itu.

Anda bisa melakukannya seperti;

Biola yang Bekerja

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 checkboxdicentang itu akan mengembalikan truesebaliknyaundefined

Ini juga merupakan ide yang sering saya gunakan:

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

Jika cheked, itu akan mengembalikan 1; jika tidak maka akan mengembalikan 0.

Demo sederhana untuk memeriksa dan mengatur kotak centang.

jsfiddle !

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

Hanya untuk mengatakan dalam contoh saya situasinya adalah kotak dialog yang kemudian memverifikasi kotak centang sebelum menutup dialog. Tak satu pun dari di atas dan Bagaimana memeriksa apakah kotak centang dicentang di jQuery? dan jQuery jika kotak centang dicentang ternyata juga tidak berfungsi.

Pada akhirnya

<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 berhasil sehingga memanggil kelas kemudian ID. bukan hanya ID. Mungkin karena elemen DOM bersarang di halaman ini yang menyebabkan masalah. Solusinya ada di atas.

Untuk kotak centang dengan id

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

Anda bisa melakukannya

$("#id_input_checkbox13").prop('checked')

Anda akan mendapatkan trueatau falsesebagai nilai pengembalian untuk sintaks di atas. Anda dapat menggunakannya di jika klausa sebagai ekspresi boolean normal.

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

Sebenarnya, menurut jsperf.com , operasi DOM adalah yang tercepat, kemudian $ (). Prop () diikuti oleh $ (). Is () !!

Berikut adalah sintaksisnya:

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 itu .is(), ini juga dapat digunakan untuk mengatur nilai.

Centang kotak centang

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

Dengan menggunakan kode ini Anda dapat memeriksa setidaknya satu kotak centang dipilih atau tidak dalam kelompok kotak centang yang berbeda atau dari beberapa kotak centang. Dengan ini, Anda tidak perlu menghapus ID atau ID dinamis. Kode ini berfungsi dengan ID yang sama.

Tautan Referensi

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <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>

Karena ini pertengahan 2019 dan jQuery terkadang mengambil kursi belakang untuk hal-hal seperti VueJS, React dll. Berikut adalah opsi pendengar onload vanilla Javascript murni:

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

Pertanyaan Anda tidak jelas: Anda ingin memberikan "id array kotak centang" pada input dan mendapatkan true/falseoutput - dengan cara ini Anda tidak akan tahu kotak centang mana yang diperiksa (seperti yang disarankan nama fungsi Anda). Jadi di bawah ini ada proposisi badan saya isCheckedByIdyang menerima input checkbox iddan return kembali true/false(ini sangat sederhana tapi ID Anda tidak boleh kata kunci),

this[id].checked

function isCheckedById(id) {
  return this[id].checked;
}

function check() {
  console.clear()
  console.log('1',isCheckedById("myCheckbox1"));
  console.log('2',isCheckedById("myCheckbox2"));
  console.log('3',isCheckedById("myCheckbox3"));
}

<label><input id="myCheckbox1" type="checkbox">check 1</label>
<label><input id="myCheckbox2" type="checkbox">check 2</label>
<label><input id="myCheckbox3" type="checkbox">check 3</label>
<!-- label around inputs makes text clickable -->
<br>
<button onclick="check()">show checked</button>

gunakan kode di bawah ini

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>