Cochez un bouton radio avec javascript

95

Pour une raison quelconque, je n'arrive pas à comprendre cela.

J'ai quelques boutons radio dans mon html qui bascule entre les catégories:

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

L'utilisateur peut sélectionner ce qu'il veut, mais lorsqu'un certain événement se déclenche, je veux définir 1234 bouton radio coché, car il s'agit du bouton radio coché par défaut.

J'ai essayé des versions de ceci (avec et sans jQuery):

document.getElementById('#_1234').checked = true;

Mais cela ne semble pas se mettre à jour. J'en ai besoin pour être visiblement mis à jour pour que l'utilisateur puisse le voir. Quelqu'un peut-il aider?

EDIT: Je suis juste fatigué et négligé #, merci de l'avoir signalé, cela et $.prop().

javascript html radio-button ptf
la source
Vérifiez cette question StackOverflow: [Comment vérifier un bouton radio avec jQuery] [1] [1]: stackoverflow.com/questions/5665915/…
Mandy Schoep
8
changer pourdocument.getElementById('_1234').checked = true;
stackErr
1
@stackErr sans le#
Tim Seguine
Désolé, juste un mauvais copier-coller. Mis à jour maintenant. @FelipeKM Alors s'il vous plaît, aidez-moi, je n'en ai pas trouvé un qui m'aide.
ptf
@kjelelokk vérifier mon commentaire ou la réponse de
Pointys

Réponses:

151

Ne mélangez pas la syntaxe CSS / JQuery ( #pour l'identifiant) avec le JS natif.

Solution JS native:

document.getElementById("_1234").checked = true;

Solution JQuery:

$("#_1234").prop("checked", true);

zavg
la source
1
Techniquement, c'est la syntaxe du sélecteur CSS. jQuery vient de l'emprunter et de l'étendre
Tim Seguine
jQuery l'a obtenu de querySelectorj'imagine.
Andy
bien mieux que.attr("checked", "checked")
ma77c
@Andy - Sizzle a été utilisé dans jQuery à partir du début de 2006. ( en.wikipedia.org/wiki/JQuery#History ). querySelectorn'a été livré dans les navigateurs qu'en 2009 et n'a été largement utilisé par les développeurs que quelque temps après. Je n'ai jamais autant utilisé jQuery, mais cela a eu un impact significatif sur l'évolution de JS.
Rounin
cela active la case à cocher mais ne déclenche pas nécessairement l'événement associé. quel événement est déclenché lorsque l'utilisateur clique sur un bouton radio?
robisrob
16

Si vous souhaitez définir le bouton "1234", vous devez utiliser son "id":

document.getElementById("_1234").checked = true;

Lorsque vous utilisez l'API du navigateur ("getElementById"), vous n'utilisez pas la syntaxe du sélecteur; vous passez simplement la valeur "id" que vous recherchez. Vous utilisez la syntaxe de sélecteur avec jQuery ou .querySelector()et .querySelectorAll().

Pointu
la source
tout le monde obtient l'élément par ID J'ai plus d'un bouton radio avec le même nom. et je pense que c'est ce dont la plupart des gens ont besoin pour sélectionner un groupe de radios par nom, puis en fonction de la valeur, cochez l'une d'entre elles.
Ndm Gjr
@NadeemGorsi l'attribut "id" ne peut pas être partagé par plus d'un élément. Toutes les valeurs "id" doivent être uniques sur une page donnée.
Pointy
9

Aujourd'hui, en 2016, il est possible de l'utiliser document.querySelectorsans connaître l'ID (surtout si vous avez plus de 2 boutons radio):

document.querySelector("input[name=main-categories]:checked").value
StanE
la source
3
OK, mais comment puis-je obtenir l'effet inverse ou vérifier une radio en fonction de la valeur ... et c'est de cela qu'il s'agissait en fait.
Ndm Gjr
1
@NadeemGorsi J'ai fourni une réponse pour sélectionner ou "cocher" un bouton radio à l'aide de QuerySelector
kevinf
6

Le moyen le plus simple serait probablement avec jQuery, comme suit:

$(document).ready(function(){
  $("#_1234").attr("checked","checked");
})

Cela ajoute un nouvel attribut "vérifié" (qui en HTML n'a pas besoin d'une valeur). N'oubliez pas d'inclure la bibliothèque jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Esser
la source
Ou juste$("#_1234").prop("checked", true)
undefined
3

En utilisant la document.getElementById()fonction, vous n'avez pas à passer# avant l'identifiant de l'élément.

Code:

document.getElementById('_1234').checked = true;

Démo: JSFiddle

Daniel Kmak
la source
3

J'ai pu sélectionner (vérifier) ​​un bouton d'entrée radio en utilisant ce code Javascript dans Firefox 72, dans une page d'options Web Extension pour CHARGER la valeur:

var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
        document.querySelector('input[name=reload_mode][value="Periodic"]').click();
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {
        document.querySelector('input[name=reload_mode][value="Both"]').click();
    }
});

Où le code associé pour SAVE la valeur était:

reload_mode: document.querySelector('input[name=reload_mode]:checked').value

Compte tenu du HTML comme suit:

    <input type="radio" id="periodic" name="reload_mode" value="Periodic">
    <label for="periodic">Periodic</label><br>
    <input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
    <label for="bottom">Page Bottom</label><br>
    <input type="radio" id="both" name="reload_mode" value="Both">
    <label for="both">Both</label></br></br>
kevinf
la source