Как установить или снять флажок с помощью JavaScript, jQuery или vanilla?
javascript
jquery
checkbox
lisovaccaro
источник
источник
Ответы:
Javascript:
jQuery (1.6+):
JQuery (1,5-):
источник
attr
илиprop
?.checked = true/false
, не вызываетchange
событие: - \Важное поведение, которое еще не было упомянуто:
Программно устанавливая отмеченный атрибут, не срабатывает
change
событие флажка .Убедитесь сами в этой скрипке:
http://jsfiddle.net/fjaeger/L9z9t04p/4/
(Fiddle протестирован в Chrome 46, Firefox 41 и IE 11)
click()
методОднажды вы можете написать код, который зависит от события, которое запускается. Чтобы убедиться, что событие происходит, вызовите
click()
метод элемента checkbox, например так:Однако это переключает проверенный статус флажка вместо того, чтобы специально установить его в
true
илиfalse
. Помните, чтоchange
событие должно срабатывать только тогда, когда проверяемый атрибут действительно изменяется.Это также относится к способу jQuery: установка атрибута с помощью
prop
илиattr
не вызываетchange
событие.Установка
checked
определенного значенияВы можете проверить
checked
атрибут перед вызовомclick()
метода. Пример:Узнайте больше о методе щелчка здесь:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
источник
elm.dispatchEvent(new Event('change'));
проверить:
снять галочку:
источник
Мы можем установить флажок частиц, как,
и снимите флажок,
источник
Я хотел бы отметить, что установка атрибута «checked» в непустую строку приводит к появлению флажка.
Таким образом, если вы установите атрибут «флажок» на «ложь» , флажок будет установлен. Мне пришлось установить значение на пустую строку, null или логическое значение false , чтобы убедиться, что флажок не установлен.
источник
Попробуй это:
источник
источник
источник
Если по какой - то причине, вы не хотите (или не может) запустить
.click()
на флажке элемента, вы можете просто изменить его значение непосредственно через его .Checked свойства ( атрибута IDL в<input type="checkbox">
).Обратите внимание, что при этом не запускается обычно связанное событие ( изменение ), поэтому вам нужно вручную запустить его, чтобы получить полное решение, которое работает со всеми связанными обработчиками событий.
Вот функциональный пример в необработанном javascript (ES6):
Если вы запустите это и нажмете оба флажка и кнопку, вы должны понять, как это работает.
Обратите внимание, что я использовал document.querySelector для краткости / простоты, но его можно легко создать, чтобы либо передать заданный идентификатор конструктору, либо применить его ко всем кнопкам, которые действуют как метки aria для флажка (обратите внимание, что я не удосужился установить идентификатор на кнопке и присвоить флажок aria-labelledby, что должно быть сделано при использовании этого метода) или каким-либо другим способом расширить это. Последние два
addEventListener
просто продемонстрировать, как это работает.источник
Для однократной проверки попробуйте
для нескольких попыток
Показать фрагмент кода
источник
Я согласен с текущими ответами, но в моем случае это не работает, я надеюсь, что этот код поможет кому-то в будущем:
источник