Vérifier / décocher la case à cocher avec JavaScript

Question

Comment peut-on cocher/décocher une case à cocher en utilisant JavaScript?

Answer 1

JavaScript:

// Cocher
document.getElementById("checkbox").checked = true;

// Décocher
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Cocher
$("#checkbox").prop("checked", true);

// Décocher
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Cocher
$("#checkbox").attr("checked", true);

// Décocher
$("#checkbox").attr("checked", false);

Answer 2

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

Définir le attribut checked par programmation ne déclenche pas l'événement change de la case à cocher.

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

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

La méthode click()

Un jour, vous pourriez vous retrouver à écrire du code qui dépend de l'événement étant déclenché. Pour vous assurer que l'événement se déclenche, appelez la méthode click() de l'élément de case à cocher, comme ceci:

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

Cependant, cela bascule le statut de la case à cocher, au lieu de le définir de manière spécifique à true ou false. Rappelez-vous que l'événement change devrait seulement se déclencher lorsque l'attribut checked change effectivement.

Cela s'applique également à la manière jQuery: définir l'attribut en utilisant prop ou attr ne déclenche pas l'événement change.

Définition de checked à une valeur spécifique

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

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

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

Answer 3

Pour vérifier :

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

pour décocher :

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

Answer 4

Nous pouvons cocher une case à cocher particulière comme suit,

$('id de la case à cocher')[0].checked = true

et décocher par ,

$('id de la case à cocher')[0].checked = false

Answer 5

Essayez ceci :

//Vérifier
document.getElementById('checkbox').setAttribute('checked', 'checked');

//Décocher
document.getElementById('chk').removeAttribute('checked');