Comment une case à cocher peut-elle être cochée / décochée en utilisant JavaScript, jQuery ou 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);

Comportement important qui n'a pas encore été mentionné:

La définition par programme de l' attribut vérifié ne déclenche pas l' changeévénement de la case à cocher .

Voyez par vous-même dans ce violon:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle testé dans Chrome 46, Firefox 41 et IE 11)

La click()méthode

Un jour, vous pourriez vous retrouver à écrire du code, qui dépend du déclenchement de l'événement. Pour vous assurer que l'événement se déclenche, appelez leclick() méthode de l'élément checkbox, comme ceci:

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

Cependant, cela bascule l'état vérifié de la case à cocher, au lieu de la définir spécifiquement sur true ou false. N'oubliez pas que l' changeévénement ne doit se déclencher que lorsque l'attribut vérifié change réellement.

Cela s'applique également à la méthode jQuery: définition de l'attribut à l'aide prop ou attrne déclenche pas l' changeévénement.

Définition checkedd'une valeur spécifique

Vous pouvez tester le checked attribut avant d'appeler la click()méthode. Exemple:

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

En savoir plus sur la méthode de clic ici:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

vérifier:

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

à décocher:

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

Nous pouvons cocher une case à cocher comme,

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

et décochez par,

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

Je voudrais noter que la définition de l'attribut «vérifié» sur une chaîne non vide conduit à une case cochée.

Donc, si vous définissez l'attribut «vérifié» sur «faux» , la case à cocher sera cochée. J'ai dû définir la valeur sur la chaîne vide, null ou la valeur booléenne false afin de m'assurer que la case à cocher n'était pas cochée.

Essaye ça:

//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, pour une raison quelconque, vous ne voulez pas (ou ne pouvez pas) exécuter un .click()élément sur la case à cocher, vous pouvez simplement changer sa valeur directement via sa propriété .checked (un attribut IDL de <input type="checkbox">).

Notez que cela ne déclenche pas l'événement normalement lié ( modification ), vous devrez donc le déclencher manuellement pour avoir une solution complète qui fonctionne avec tous les gestionnaires d'événements associés.

Voici un exemple fonctionnel en javascript brut (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 vous exécutez cela et cliquez sur la case à cocher et sur le bouton, vous devriez avoir une idée de comment cela fonctionne.

Notez que j'ai utilisé document.querySelector pour la brièveté / simplicité, mais cela pourrait facilement être construit pour avoir un ID donné transmis au constructeur, ou il pourrait s'appliquer à tous les boutons qui agissent comme des étiquettes aria pour une case à cocher (notez que je n'a pas pris la peine de définir un identifiant sur le bouton et de donner à la case à cocher un aria-labelledby, ce qui devrait être fait si vous utilisez cette méthode) ou un certain nombre d'autres façons de l'étendre. Les deux derniers addEventListeners sont juste pour démontrer comment cela fonctionne.

Pour un contrôle unique, essayez

myCheckBox.checked=1

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

pour plusieurs essais

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>

Je suis d'accord avec les réponses actuelles, mais dans mon cas cela ne fonctionne pas, j'espère que ce code aidera quelqu'un à l'avenir:

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