web-dev-qa-db-fra.com

Cocher/décocher la case avec JavaScript?

Comment cocher/décocher une case à l'aide de JavaScript ou de jQuery?

javascriptjquery
419
lisovaccaro

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);
806
Alex Peattie

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

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

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

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

La méthode click()

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

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

Toutefois, cela bascule le statut coché de la case à cocher, au lieu de le définir spécifiquement sur true ou false. N'oubliez pas que l'événement change ne doit être déclenché que lorsque l'attribut vérifié est modifié.

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

Définir checked à une valeur spécifique

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

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

97
franzjaeger

vérifier:

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

décocher:

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

Je voudrais noter que le fait de définir 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. Je devais définir la valeur sur la chaîne vide,nullou la valeur booléennefalseafin de vérifier que la case à cocher n'était pas cochée.

12
Jan Rasehorn

Nous pouvons cocher une case à cocher des particules comme,

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

et décocher par,

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

Essaye ça: 

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');
7
Syed Jamil Uddin
<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>
4
M.Owais
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}
3
kandi

Si, pour une raison quelconque, vous ne voulez 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 <input type="checkbox"> ).

Notez que cela ne déclenche pas l'événement normalement associé ( change ). Vous devez donc le déclencher manuellement pour disposer d'une solution complète fonctionnant 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 ceci et cliquez sur la case à cocher et le bouton, vous devriez avoir une idée de la façon dont cela fonctionne.

Notez que j'ai utilisé document.querySelector pour la brièveté/la simplicité, mais cela pourrait facilement être construit de manière à ce qu'un identifiant donné soit passé au constructeur, ou que cela s'applique à tous les boutons agissant comme des étiquettes aria pour une case à cocher (notez que n'a pas pris la peine de définir un identifiant sur le bouton et de donner à la case à cocher un libellé aria, ce qui devrait être fait si vous utilisez cette méthode) ou un certain nombre d'autres façons de développer cela. Les deux derniers addEventListeners servent simplement à démontrer comment cela fonctionne.

0
taswyn