Bagaimana kotak centang dapat dicentang / tidak dicentang menggunakan JavaScript, jQuery atau vanilla?

Javascript:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

Perilaku penting yang belum disebutkan:

Secara terprogram mengatur atribut yang dicentang , tidak memunculkan changeevent kotak centang .

Lihat sendiri di biola ini:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle diuji di Chrome 46, Firefox 41 dan IE 11)

The click()metode

Suatu hari Anda mungkin menemukan diri Anda menulis kode, yang bergantung pada acara yang dipecat. Untuk memastikan acara tersebut menyala, panggil click()metode elemen kotak centang, seperti ini:

document.getElementById('checkbox').click();

Namun, ini mengubah status kotak centang yang dicentang, alih-alih secara khusus mengaturnya ke trueatau false. Ingat bahwa changeacara hanya boleh diaktifkan, ketika atribut yang diperiksa benar-benar berubah.

Ini juga berlaku untuk cara jQuery: mengatur atribut menggunakan propatau attr, tidak mem- changeevent.

Pengaturan checkedke nilai tertentu

Anda bisa menguji checkedatributnya, sebelum memanggil click()metode. Contoh:

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

Baca lebih lanjut tentang metode klik di sini:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

untuk memeriksa:

document.getElementById("id-of-checkbox").checked = true;

untuk menghapus centang:

document.getElementById("id-of-checkbox").checked = false;

Kami dapat memeriksa kotak centang partikulat sebagai,

$('id of the checkbox')[0].checked = true

dan hapus centang oleh,

$('id of the checkbox')[0].checked = false

Saya ingin mencatat, bahwa pengaturan atribut 'diperiksa' ke string yang tidak kosong mengarah ke kotak centang.

Jadi, jika Anda menetapkan atribut 'dicentang' ke "false" , kotak centang akan diperiksa. Saya harus mengatur nilai ke string kosong, nol atau nilai boolean salah untuk memastikan kotak centang tidak dicentang.

Coba ini:

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');

<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>

function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}

Jika, karena alasan tertentu, Anda tidak ingin (atau tidak bisa) menjalankan .click()elemen pada kotak centang, Anda cukup mengubah nilainya secara langsung melalui properti .checked-nya ( atribut IDL dari<input type="checkbox"> ).

Perhatikan bahwa hal tersebut tidak memecat peristiwa yang biasanya terkait ( perubahan ) sehingga Anda harus memecatnya secara manual untuk mendapatkan solusi lengkap yang berfungsi dengan penangan acara terkait.

Berikut ini contoh fungsional dalam javascript mentah (ES6):

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');

    let checkEvent = new Event('change');
    
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}

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

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

Jika Anda menjalankan ini dan mengklik kotak centang dan tombol, Anda harus memahami cara kerjanya.

Perhatikan bahwa saya menggunakan document.querySelector untuk singkatnya / kesederhanaan, tetapi ini dapat dengan mudah dibangun untuk memiliki ID yang diberikan diteruskan ke konstruktor, atau itu bisa berlaku untuk semua tombol yang bertindak sebagai aria-label untuk kotak centang (perhatikan bahwa saya tidak repot-repot mengatur id pada tombol dan memberikan kotak centang aria-labelledby, yang harus dilakukan jika menggunakan metode ini) atau sejumlah cara lain untuk memperluas ini. Dua yang terakhir addEventListenerhanya untuk mendemonstrasikan cara kerjanya.

Untuk uji coba tunggal

myCheckBox.checked=1

<input type="checkbox" id="myCheckBox"> Call to her

untuk multi coba

document.querySelectorAll('.imChecked').forEach(c=> c.checked=1)

Buy wine: <input type="checkbox" class="imChecked"><br>
Play smooth-jazz music: <input type="checkbox"><br>
Shave: <input type="checkbox" class="imChecked"><br>

Saya setuju dengan jawaban saat ini, tetapi dalam kasus saya itu tidak berfungsi, saya harap kode ini membantu seseorang di masa depan:

// check
$('#checkbox_id').click()