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

Question

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

Answer 1

Si, pour une raison quelconque, vous ne souhaitez pas (ou ne pouvez pas) exécuter un .click() sur l'élément de case à cocher, vous pouvez simplement changer sa valeur directement via sa propriété .checked (un attribut IDL de ).

Notez que ce n'est pas déclenche l'événement normalement lié (change) donc vous devrez le déclencher manuellement pour avoir une solution complète qui fonctionne avec n'importe quel gestionnaire d'événements lié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', '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);
}

Changer la case à cocher !

Aucun changement pour l'instant !

Si vous exécutez cela et cliquez à la fois sur la case à cocher et sur le bouton, vous devriez avoir une idée de son fonctionnement.

Notez que j'ai utilisé document.querySelector pour la brièveté / simplicité, mais cela pourrait facilement être étendu pour avoir un identifiant donné passé au constructeur, ou cela pourrait s'appliquer à tous les boutons agissant comme attributs aria-label pour une case à cocher (notez que je ne me suis pas embêté à définir un identifiant sur le bouton et à donner à la case à cocher une attribut aria-labelledby, ce qui devrait être fait si vous utilisez cette méthode) ou de nombreuses autres façons d'étendre cela. Les deux derniers addEventListener servent simplement à montrer comment cela fonctionne.

Answer 2

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 :

// vérifier
$('#checkbox_id').click()

Answer 3

Donc je me retrouve souvent avec plusieurs cases à cocher ayant le même nom d'entrée, ce qui les regroupe joliment lors de la soumission POST. Pour décocher toutes les cases à cocher pour ce nom d'entrée, j'utilise quelque chose comme ceci :

for (const cbe of document.querySelectorAll('[name=xxx]')) {
    cbe.checked = false;
}

Answer 4

Pour cocher : document.getElementById('id').checked = true;

Pour décocher : document.getElementById('id').checked = false;

Answer 5

La vanille (PHP) vérifiera la case à cocher et stockera le résultat.

 >

# sur le serveur