web-dev-qa-db-fra.com

Comment décocher une case en JavaScript pur?

Voici le code HTML:

<div class="text">
   <input value="true" type="checkbox" checked="" name="copyNewAddrToBilling"><label>

Je veux changer la valeur en false. Ou simplement décochez la case. J'aimerais le faire en JavaScript pur, sans utiliser de bibliothèques externes (pas de jQuery, etc.)

javascripthtmlcheckbox
38
De Vonte
<html>
    <body>
        <input id="check1" type="checkbox" checked="" name="copyNewAddrToBilling">
    </body>
    <script language="javascript">
        document.getElementById("check1").checked = true;
        document.getElementById("check1").checked = false;
    </script>
</html>

J'ai ajouté l'attribut language à l'élément script, mais il est inutile car tous les navigateurs l'utilisent par défaut, mais cela ne laisse aucun doute sur ce que cet exemple montre.

Si vous souhaitez utiliser javascript pour accéder aux éléments, le nombre de fonctions GetElement * disponibles est très limité. Vous devrez donc prendre l’habitude de donner à chaque élément un attribut UNIQUE id.

64
Strings

Recommandé, sans jQuery :

Donne ton <input> _ un identifiant et faites référence à cela. En outre, supprimez le checked="" partie de la <input>tag si vous souhaitez que la case à cocher ne soit pas cochée. Alors c'est:

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

JavaScript pur, sans ID d'élément (# 1) :

var inputs = document.getElementsByTagName('input');

for(var i = 0; i<inputs.length; i++){

  if(typeof inputs[i].getAttribute === 'function' && inputs[i].getAttribute('name') === 'copyNewAddrToBilling'){

    inputs[i].checked = true;

    break;

  }
}

Javascript pur, sans ID d'élément (# 2) :

document.querySelectorAll('.text input[name="copyNewAddrToBilling"]')[0].checked = true;

document.querySelector('.text input[name="copyNewAddrToBilling"]').checked = true;

Notez que les méthodes querySelectorAll et querySelector sont supportées par ces navigateurs: IE8 +, Chrome 4 +, Safari 3.1+, Firefox 3.5+ et tous les navigateurs mobiles.

Si l’élément est manquant, vous devez en vérifier l’existence, par exemple:

var input = document.querySelector('.text input[name="copyNewAddrToBilling"]');
if (!input) { return; }

Avec jQuery :

$('.text input[name="copyNewAddrToBilling"]').prop('checked', true);
10
shennan

Il y a une autre façon de faire ceci:

//elem - get the checkbox element and then
elem.setAttribute('checked', 'checked'); //check
elem.removeAttribute('checked'); //uncheck
5
Yang You

Vous devrez attribuer un identifiant à la case à cocher:

<input id="checkboxId" type="checkbox" checked="" name="copyNewAddrToBilling">

puis en JavaScript:

document.getElementById("checkboxId").checked = false;
0
Oli_G