Bagaimana bisa centang akan diperiksa/tidak 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);
Penting perilaku yang belum disebutkan:
Pemrograman pengaturan memeriksa atribut, tidak api perubahan
peristiwa kotak centang.
Lihat sendiri dalam hal ini biola:
(Biola diuji di Chrome 46, Firefox 41 dan IE 11)
klik()
metodeSuatu hari anda mungkin menemukan diri anda menulis kode, yang bergantung pada acara yang dipecat. Untuk memastikan peristiwa kebakaran, sebut klik()
metode centang elemen, seperti ini:
document.getElementById('checkbox').click();
Namun, ini matikan memeriksa status checkbox, bukan secara khusus pengaturan untuk true
atau false
. Ingat bahwa perubahan
acara hanya boleh api, ketika diperiksa atribut benar-benar berubah.
Hal ini juga berlaku untuk jQuery cara: menetapkan atribut menggunakan prop
atau y
, tidak api perubahan
acara.
diperiksa
dengan nilai tertentuAnda bisa menguji diperiksa
atribut, sebelum memanggil klik()
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
Saya ingin untuk dicatat, bahwa pengaturan 'telah memeriksa' atribut non-string kosong mengarah ke diperiksa kotak.
Jadi jika anda mengatur 'telah memeriksa' atribut "salah", checkbox akan diperiksa. Aku harus mengatur nilai ke string kosong, null atau nilai boolean palsu dalam rangka untuk memastikan checkbox itu tidak diperiksa.
<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>
Jika, untuk beberapa alasan, anda don't ingin (atau dapat't) menjalankan .klik()
pada kotak elemen, anda hanya dapat mengubah nilainya langsung melalui .memeriksa properti (IDL atribut dari <input type="centang">
).
Catatan yang demikian api tidak biasanya terkait peristiwa (berubah) sehingga anda'akan perlu untuk secara manual api untuk memiliki solusi lengkap yang bekerja dengan apapun yang berhubungan dengan event handler.
Berikut ini's fungsional contoh baku javascript (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 klik pada kotak centang dan tombol anda harus mendapatkan rasa bagaimana ini bekerja.
Perhatikan bahwa saya menggunakan dokumen.querySelector untuk singkatnya/kesederhanaan, tapi ini dapat dengan mudah dibangun dengan baik memiliki ID yang diberikan diteruskan ke konstruktor, atau hal itu bisa berlaku untuk semua tombol yang bertindak sebagai aria-label untuk centang (perhatikan bahwa saya tidak't repot-repot setting id pada tombol dan memberikan centang aria-labelledby, yang harus dilakukan jika menggunakan metode ini) atau sejumlah cara lain untuk memperluas ini. Dua yang terakhir `addEventListener ini hanya untuk demo cara kerjanya.