Jak można zaznaczyć / odznaczyć pole wyboru za pomocą JavaScript, jQuery lub wanilii?

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

Ważne zachowanie, o którym jeszcze nie wspomniano:

Programowe ustawienie zaznaczonego atrybutu nie uruchamia changezdarzenia pola wyboru .

Przekonaj się w tym skrzypcach:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle przetestowany w Chrome 46, Firefox 41 i IE 11)

click()metoda

Pewnego dnia może się okazać, że piszesz kod, który zależy od odpalonego zdarzenia. Aby mieć pewność, że zdarzenie zostanie uruchomione, wywołaj click()metodę elementu checkbox, tak jak poniżej:

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

Zmienia to jednak status zaznaczonego pola wyboru, zamiast ustawiania go na truelub false. Pamiętaj, że changezdarzenie powinno zostać uruchomione tylko wtedy, gdy zaznaczony atrybut faktycznie się zmieni.

Dotyczy to również sposobu jQuery: ustawienie atrybutu za pomocą proplub attrnie powoduje uruchomienia changezdarzenia.

Ustawienie checkedokreślonej wartości

Możesz przetestować checkedatrybut przed wywołaniem click()metody. Przykład:

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

Przeczytaj więcej na temat metody kliknięcia tutaj:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

sprawdzić:

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

odznacz:

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

Możemy zaznaczyć pole wyboru cząstek stałych, ponieważ,

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

i odznacz,

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

Chciałbym zauważyć, że ustawienie atrybutu „zaznaczone” na niepusty ciąg prowadzi do zaznaczenia pola wyboru.

Jeśli więc ustawisz atrybut „zaznaczony” na „false” , pole wyboru zostanie zaznaczone. Musiałem ustawić wartość na pusty ciąg, null lub wartość logiczną false , aby upewnić się, że pole wyboru nie jest zaznaczone.

Spróbuj tego:

//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();
}

Jeśli z jakiegoś powodu, nie chcą (lub nie mogą) uruchomić .click()na elemencie checkbox, można po prostu zmienić jego wartość bezpośrednio poprzez jego właściwości .checked (AN atrybutu IDL z <input type="checkbox">).

Pamiętaj, że zrobienie tego nie powoduje uruchomienia normalnie powiązanego zdarzenia ( zmiany ), dlatego musisz ręcznie uruchomić to, aby uzyskać kompletne rozwiązanie, które działa z powiązanymi programami obsługi zdarzeń.

Oto funkcjonalny przykład w surowym 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>

Jeśli uruchomisz to i klikniesz zarówno pole wyboru, jak i przycisk, powinieneś dowiedzieć się, jak to działa.

Zauważ, że użyłem document.querySelector dla zwięzłości / prostoty, ale można to łatwo zbudować tak, aby albo miał dany identyfikator przekazany do konstruktora, albo może mieć zastosowanie do wszystkich przycisków, które działają jak etykiety aria dla pola wyboru (zwróć uwagę, że I nie zawracałem sobie głowy ustawieniem identyfikatora na przycisku i nadaniem temu polu wyboru arii-labelledby, co powinno być zrobione, jeśli używasz tej metody) lub na wiele innych sposobów, aby to rozwinąć. Dwa ostatnie addEventListenermają tylko pokazać, jak to działa.

Spróbuj pojedynczej kontroli

myCheckBox.checked=1

<input type="checkbox" id="myCheckBox"> Call to her

dla wielu prób

document.querySelectorAll('.imChecked').forEach(c=> c.checked=1)

Buy wine: <input type="checkbox" class="imChecked"><br>
Play smooth-jazz music: <input type="checkbox"><br>
Shave: <input type="checkbox" class="imChecked"><br>

Zgadzam się z aktualnymi odpowiedziami, ale w moim przypadku nie działa, mam nadzieję, że ten kod pomoże komuś w przyszłości:

// check
$('#checkbox_id').click()