Установить / снять флажок с помощью JavaScript (jQuery или Vanilla)?

Question

Как установить или снять флажок с помощью JavaScript, jQuery или vanilla?

Answer 1

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);

Answer 2

Важное поведение, которое еще не было упомянуто:

Программная установка атрибута флажок не вызывает событие change флажка .

Убедитесь сами в этой скрипке:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle протестирован в Chrome 46, Firefox 41 и IE 11)

Метод click()

Однажды вы, возможно, обнаружите, что пишете код, который зависит от инициируемого события. Чтобы событие сработало, вызовите метод click() элемента checkbox, например:

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

Однако это переключает проверенный статус флажка, вместо того, чтобы специально установить его на true или false. Помните, что событие change должно запускаться только тогда, когда проверяемый атрибут действительно изменяется.

Это также относится к способу jQuery: установка атрибута с помощью prop или attr, не вызывает событие change.

Установка checked на определенное значение

Вы можете проверить атрибут checked перед вызовом метода click(). Пример:

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

Подробнее о методе щелчка здесь:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Answer 3

проверить:

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

снять отметку:

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

Answer 4

Мы можем проверить флажок частиц как,

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

и снимите отметку,

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

Answer 5

Хотелось бы отметить, что установка атрибута 'checked' в непустую строку приводит к появлению флажка.

Таким образом, если вы установите для атрибута 'checked' значение "false" , флажок будет установлен. Мне пришлось установить значение на пустую строку, null или логическое значение false , чтобы убедиться, что флажок не был проверено.

Answer 6

Попробуйте:

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

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

Answer 7

<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>

Answer 8

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

Answer 9

Если вы хотите использовать TypeScript, вы можете сделать так:

function defaultCheckedFirst(checkGroup: any): void {
        for (let i = 0; i < checkGroup.length; i++) {
            (<HTMLInputElement>radionGroups[i]).checked = (i === 0 ? true : false);
        }
    }

Answer 10

Если по какой-то причине вы не хотите (или не можете) запустить .click() для элемента флажка, вы можете просто изменить его значение напрямую через его свойство .checked ( атрибут IDL из <input type="checkbox">).

Примечание , что при этом не запускается нормально связанное событие ( change ) поэтому вам нужно вручную запустить его, чтобы получить полное решение, которое работает с любыми связанными обработчиками событий.

Вот функциональный пример в необработанном 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>

Если вы запустите это и нажмете как флажок, так и кнопку, вы должны получить представление о том, как это работает.

Обратите внимание, что ядля краткости / простоты использовал document.querySelector, но это можно легко сделать, чтобы либо передать заданный идентификатор конструктору, либо применить его ко всем кнопкам, которые действуют как метки арии для флажка (обратите внимание, что я этого не делалпотрудитесь установить идентификатор на кнопке и поставить флажок aria-labelledby, что должно быть сделано при использовании этого метода) или любой другой способ расширить это.Последние два addEventListener просто продемонстрировать, как это работает.