Come è possibile selezionare / deselezionare una casella di controllo utilizzando JavaScript, jQuery o vanilla?

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

Comportamento importante che non è stato ancora menzionato:

L'impostazione a livello di programmazione dell'attributo controllato , non attiva l' changeevento della casella di controllo .

Guarda tu stesso in questo violino:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle testato in Chrome 46, Firefox 41 e IE 11)

Il click()metodo

Un giorno potresti ritrovarti a scrivere codice, che si basa sull'evento che viene generato. Per assicurarsi che l'evento venga generato, chiama il click()metodo dell'elemento checkbox, in questo modo:

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

Tuttavia, questo attiva o disattiva lo stato selezionato della casella di controllo, anziché impostarlo specificamente su trueo false. Ricorda che l' changeevento dovrebbe attivarsi solo quando l'attributo controllato cambia effettivamente.

Si applica anche al modo jQuery: l'impostazione dell'attributo utilizzando propo attr, non attiva l' changeevento.

Impostazione checkedsu un valore specifico

È possibile verificare l' checkedattributo prima di chiamare il click()metodo. Esempio:

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

Maggiori informazioni sul metodo di clic qui:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

controllare:

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

per deselezionare:

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

Possiamo selezionare una casella di controllo del particolato come

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

e deseleziona da,

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

Vorrei sottolineare che l'impostazione dell'attributo 'controllato' su una stringa non vuota porta a una casella selezionata.

Pertanto, se si imposta l'attributo 'controllato' su "falso" , la casella sarà selezionata. Ho dovuto impostare il valore sulla stringa vuota, null o il valore booleano false per assicurarmi che la casella di controllo non fosse selezionata.

Prova questo:

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

Se, per qualche motivo, non vuoi (o non puoi) eseguire un .click()elemento nella casella di controllo, puoi semplicemente modificarne il valore direttamente tramite la sua proprietà .checked (un attributo IDL di <input type="checkbox">).

Notare che ciò non genera l'evento normalmente correlato ( modifica ), quindi è necessario attivarlo manualmente per avere una soluzione completa che funzioni con tutti i gestori di eventi correlati.

Ecco un esempio funzionale in javascript non elaborato (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>

Se lo esegui e fai clic sulla casella di controllo e sul pulsante, dovresti avere un'idea di come funziona.

Nota che ho usato document.querySelector per brevità / semplicità, ma questo potrebbe essere facilmente costruito per avere un determinato ID passato al costruttore, oppure potrebbe essere applicato a tutti i pulsanti che fungono da etichette aria per una casella di controllo (nota che I non si è preso la briga di impostare un ID sul pulsante e di dare alla casella un'etichetta aria, che dovrebbe essere fatto se si utilizza questo metodo) o qualsiasi altro modo per espanderlo. Gli ultimi due addEventListenersecondi sono solo per dimostrare come funziona.

Per un singolo controllo provare

myCheckBox.checked=1

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

per più tentativi

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>

Sono d'accordo con le risposte attuali, ma nel mio caso non funziona, spero che questo codice aiuti qualcuno in futuro:

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