Ответ 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);

Ответ 2

Важное поведение, о котором еще не упоминалось:

Программно устанавливая атрибут 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

Ответ 3

проверить:

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

снять галочку:

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

Ответ 4

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

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

и снимите флажок,

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

Ответ 5

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

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

Ответ 6

Попробуйте следующее:

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

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

Ответ 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>

Ответ 8

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

Ответ 9

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

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

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