web-dev-qa-db-fra.com

Cochez une case d'option avec javascript

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

J'ai quelques boutons radio dans mon html qui permettent de changer de catégorie:

<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/elle veut, mais lorsqu'un événement donné se déclenche, je souhaite définir le bouton d'option coché 1234, car il s'agit du bouton d'option coché par défaut.

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

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

Mais cela ne semble pas se mettre à jour. J'en ai besoin d'une mise à jour visible pour que l'utilisateur puisse le voir. Quelqu'un peut aider?

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

javascripthtmlradio-button
74
ptf

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

solution JS native:

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

solution JQuery:

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

123
zavg

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 de sélecteur. vous passez juste la valeur "id" que vous recherchez. Vous utilisez la syntaxe de sélecteur avec jQuery ou .querySelector() et .querySelectorAll().

13
Pointy

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é" (ce qui en HTML n'a pas besoin de 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>
6
Esser

Aujourd'hui, en 2016, il est préférable d'utiliser document.querySelector sans connaître l'identifiant (surtout si vous avez plus de 2 boutons radio):

document.querySelector("input[name=main-categories]:checked").value
5
StanE

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

Code:

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

Démo: JSFiddle

1
Daniel Kmak