¿Cómo se puede marcar / desmarcar una casilla de verificación usando JavaScript, jQuery o vainilla?

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

Comportamiento importante que aún no se ha mencionado:

La configuración programática del atributo marcado no activa el changeevento de la casilla de verificación .

Compruébalo tú mismo en este violín:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle probado en Chrome 46, Firefox 41 e IE 11)

El click()metodo

Algún día te encontrarás escribiendo código, que se basa en el evento que se dispara. Para asegurarse de que el evento se active, llame al click()método del elemento de casilla de verificación, de esta manera:

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

Sin embargo, esto alterna el estado marcado de la casilla de verificación, en lugar de establecerlo específicamente en trueo false. Recuerde que el changeevento solo debe activarse cuando el atributo marcado realmente cambia.

También se aplica a la forma jQuery: establecer el atributo usando propo attr, no activa el changeevento.

Establecer checkedun valor específico

Puede probar el checkedatributo antes de llamar al click()método. Ejemplo:

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

Lea más sobre el método de clic aquí:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

verificar:

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

desmarcar:

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

Podemos marcar una casilla de verificación de partículas como,

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

y desmarcar,

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

Me gustaría señalar que establecer el atributo 'marcado' en una cadena no vacía conduce a una casilla marcada.

Entonces, si establece el atributo 'marcado' en "falso" , la casilla de verificación estará marcada. Tuve que establecer el valor en la cadena vacía, nulo o el valor booleano falso para asegurarme de que la casilla de verificación no estuviera marcada.

Prueba esto:

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

Si, por alguna razón, no desea (o no puede) ejecutar un .click()elemento en la casilla de verificación, simplemente puede cambiar su valor directamente a través de su propiedad .checked (un atributo IDL de <input type="checkbox">).

Tenga en cuenta que hacerlo no activa el evento normalmente relacionado ( cambio ), por lo que deberá activarlo manualmente para tener una solución completa que funcione con cualquier controlador de eventos relacionado.

Aquí hay un ejemplo funcional en javascript sin procesar (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>

Si ejecuta esto y hace clic en la casilla de verificación y en el botón, debería tener una idea de cómo funciona.

Tenga en cuenta que usé document.querySelector por brevedad / simplicidad, pero esto podría construirse fácilmente para que se le pase una ID dada al constructor, o podría aplicarse a todos los botones que actúan como etiquetas de aria para una casilla de verificación (tenga en cuenta que no se molestó en configurar una identificación en el botón y darle a la casilla de verificación un aria-labelledby, que debe hacerse si se usa este método) o cualquier otra forma de expandir esto. Los dos últimos addEventListeners son solo para demostrar cómo funciona.

Para un solo cheque intente

myCheckBox.checked=1

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

para múltiples intentos

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>

Estoy de acuerdo con las respuestas actuales, pero en mi caso no funciona, espero que este código ayude a alguien en el futuro:

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