web-dev-qa-db-fra.com

Comment définir l'état des boutons radio avec JavaScript

Quelle méthode serait préférable d'utiliser pour définir de manière sélective un ou plusieurs boutons radio sur le paramètre souhaité avec JavaScript?

javascripthtml5
36
vinomarky

Très simple

radiobtn = document.getElementById("theid");
radiobtn.checked = true;
76
Starx

la forme

<form name="teenageMutant">
  <input value="aa" type="radio" name="ninjaTurtles"/>
  <input value="bb" type="radio" name="ninjaTurtles"/>
  <input value="cc" type="radio" name="ninjaTurtles" checked/>
</form>

value = "cc" sera coché par défaut, si vous supprimez le "coché", les cases seront cochées lors du premier chargement du formulaire.

document.teenageMutant.ninjaTurtles[0].checked=true;

maintenant, valeur = "aa" est cochée. Les autres cases à cocher de la radio ne sont pas cochées.

le voir en action: http://jsfiddle.net/yaArr/

Vous pouvez faire la même chose en utilisant l'ID de formulaire et l'ID de bouton radio. Voici un formulaire avec les identifiants.

<form id="lizardPeople" name="teenageMutant">
  <input id="dinosaurs" value="aa" type="radio" name="ninjaTurtles"/>
  <input id="elephant" value="bb" type="radio" name="ninjaTurtles"/>
  <input id="dodoBird" value="cc" type="radio" name="ninjaTurtles" checked/>
</form>

value = "cc" est coché par défaut.

document.forms["lizardPeople"]["dinosaurs"].checked=true;

maintenant, valeur = "aa" avec id = "dinosaurs" est cochée, comme avant.

Voyez-le en action: http://jsfiddle.net/jPfXS/

25
gaby de wilde

Vanille Javascript:

yourRadioButton.checked = true;

jQuery:

$('input[name=foo]').prop('checked', true);

ou

$("input:checkbox").val() == "true"
15
Justin Helgerson

Vous pouvez également définir explicitement la valeur du bouton radio:

<form name="gendersForm">
  <input type="radio" name="gender" value="M" /> Man
  <input type="radio" name="gender" value="F" /> Woman
</form>

avec le script suivant:

document.gendersForm.gender.value="F";

et le bouton radio correspondant sera coché automatiquement.

Regardez le exemple sur JSFiddle .

8
sbrbot
/**
 * setCheckedValueOfRadioButtonGroup
 * @param {html input type=radio} vRadioObj 
 * @param {the radiobutton with this value will be checked} vValue 
 */
function setCheckedValueOfRadioButtonGroup(vRadioObj, vValue) {
    var radios = document.getElementsByName(vRadioObj.name);
    for (var j = 0; j < radios.length; j++) {
        if (radios[j].value == vValue) {
            radios[j].checked = true;
            break;
        }
    }
}
0
Luigi D'Amico

Je suis en train de configurer un bouton radio dans un fragment de document et j'ai essayé d'utiliser radiobtn.checked = true;. 

Cela n'a pas fonctionné, je suis donc allé avec cette solution:

radiobtn.setAttribute("checked", "checked");
0
NuclearPeon