Как установить или снять флажок с помощью JavaScript или jQuery?
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);
attr
или prop
?
Важное поведение, о котором еще не упоминалось:
Программно устанавливая атрибут checked, не запускает событие change
флажка.
Посмотрите сами в этой скрипке:
http://jsfiddle.net/fjaeger/L9z9t04p/4/
(Fiddle тестируется в Chrome 46, Firefox 41 и IE 11)
click()
В какой-то день вы можете найти код написания, который зависит от того, какое событие уволено. Чтобы убедиться, что событие срабатывает, вызовите метод click()
элемента флажка, например:
document.getElementById('checkbox').click();
Тем не менее, это переключает проверенное состояние флажка вместо того, чтобы специально установить его на true
или false
. Помните, что событие change
должно срабатывать только при фактическом изменении атрибута checked.
Это также относится к способу jQuery: установка атрибута с помощью prop
или attr
не запускает событие change
.
checked
на определенное значениеВы можете протестировать атрибут checked
перед вызовом метода click()
. Пример:
function toggle(checked) {
var elm = document.getElementById('checkbox');
if (checked != elm.checked) {
elm.click();
}
}
Подробнее о методе click читайте здесь:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
elm.dispatchEvent(new Event('change'));
чтобы проверить:
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' значение "false" , этот флажок будет установлен. Мне нужно было установить значение в пустую строку 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>
function setCheckboxValue(checkbox,value) {
if (checkbox.checked!=value)
checkbox.click();
}