Установите / снимите флажок с JavaScript?
Как можно проверить/снять флажок с помощью JavaScript или jQuery?
10 ответов
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);
важно поведение, которое еще не было упомянуто:
программная настройка проверил атрибут, не запускает change
событие галочку.
смотрите сами в этой скрипке:
http://jsfiddle.net/fjaeger/L9z9t04p/4/
(Скрипка протестирована в Chrome 46, Firefox 41 и IE 11)
на click()
метод
когда-нибудь вы можете обнаружить, что пишете код, который полагается на запускаемое событие. Чтобы убедиться, что событие срабатывает, вызовите click()
метод элемента checkbox, например:
document.getElementById('checkbox').click();
однако это переключает проверенное состояние флажка, вместо того, чтобы специально устанавливать его в true
или false
. Помните, что change
событие должно срабатывать только при фактическом изменении проверяемого атрибута.
это также относится к jQuery way: Установка атрибута с помощью prop
или attr
, не огонь change
событие.
задание checked
до определенного значения
вы можете проверить checked
атрибут, перед вызовом click()
метод. Пример:
function toggle(checked) {
var elm = document.getElementById('checkbox');
if (checked != elm.checked) {
elm.click();
}
}
подробнее о методе click here:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
проверка:
document.getElementById("id-of-checkbox").checked = true;
снимите:
document.getElementById("id-of-checkbox").checked = false;
мы можем проверить флажок частиц, как,
$('id of the checkbox')[0].checked = true
и снять галочку с ,
$('id of the checkbox')[0].checked = false
Я хотел бы отметить, что Установка атрибута "checked" в непустую строку приводит к флажку.
поэтому, если вы установите атрибут "checked" в "ложные" флажок будет проверен. Я должен был установить значение в пустую строку,null или логическое значение false чтобы убедиться, что флажок не был установлен.
Попробуйте Это:
//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>
если по какой-то причине вы не хотите (или не можете) запускать .click()
на элементе checkbox вы можете просто изменить его значение непосредственно через его .проверено недвижимости (атрибут IDL of <input type="checkbox">
).
Примечание это не приводит к запуску обычно связанного события (изменить) так что вам нужно вручную запустить его, чтобы иметь полное решение, которое работает с любым связанным с этим событием дрессировщики.
вот функциональный пример в raw 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>
если вы запустите это и нажмите на флажок и кнопку, Вы должны понять, как это работает.
обратите внимание, что я использовал документ.querySelector для краткости/ простоты, но это может быть легко построено, чтобы либо передать данный идентификатор конструктору, либо применить ко всем кнопкам, которые действуют как метки aria для флажка (Примечание что я не потрудился установить идентификатор на кнопке и дать флажку Aria-labelledby, что должно быть сделано при использовании этого метода) или любое количество других способов расширить это. Последние два addEventListener
s - это просто демонстрация того, как это работает.
Если вы хотите использовать TypeScript, вы можете сделать следующее:
function defaultCheckedFirst(checkGroup: any): void {
for (let i = 0; i < checkGroup.length; i++) {
(<HTMLInputElement>radionGroups[i]).checked = (i === 0 ? true : false);
}
}