web-dev-qa-db-fra.com

Comment obtenir la valeur du bouton radio sélectionné en utilisant js

J'utilise ce code pour obtenir la valeur du bouton radio actuellement sélectionné, mais cela ne fonctionne pas.

var mailcopy = document.getElementById('mailCopy').value;

Comment obtenir la valeur du bouton radio actuellement sélectionné en utilisant Javascript?

javascriptradio-button
48
Meena

HTML

<p>Gender</p>
<input type="radio" id="gender0" name="gender" value="Male">Male<br>
<input type="radio" id="gender1" name="gender" value="Female">Female<br>

JS

var gender = document.querySelector('input[name = "gender"]:checked').value;
document.writeln("You entered " + gender + " for your gender<br>");
82
Mihai Alin

Si vous utilisez jQuery, le code suivant fonctionnera pour vous.

$('input[name=radioName]:checked').val();
45
Chamika Sandamal

Les boutons radio appartiennent à des groupes qui portent le même nom et des identifiants différents. La propriété cochée est attribuée à l'un d'eux, alors passez en boucle jusqu'à ce que vous la trouviez.

function getCheckedRadio(radio_group) {
    for (var i = 0; i < radio_group.length; i++) {
        var button = radio_group[i];
        if (button.checked) {
            return button;
        }
    }
    return undefined;
}
var checkedButton = getCheckedRadio(document.forms.frmId.elements.groupName);
if (checkedButton) {
    alert("The value is " + checkedButton.value);
}
34
Quentin

vérifie ça

<input class="gender" type="radio" name="sex" value="male">Male
<br>
<input class="gender" type="radio" name="sex" value="female">Female


<script type="text/javascript">
$(document).ready(function () {
$(".gender").change(function () {

    var val = $('.gender:checked').val();
    alert(val);
});
});

</script>

Exemple

4
Sanjay

Peut-être que je manque quelque chose ici, mais le bon vieux standard JS ne fonctionnerait-il pas? Je veux dire:

var selectedOption = document.getElementById('your-form-name')['radio-group-name'].value;

... qui n'est valable que si vous avez fourni une "valeur" pour vos éléments d'entrée radio.

<input type="radio" name="radio-group-name" value="red" checked>
<input type="radio" name="radio-group-name" value="blue">

La valeur doit être "rouge" ou "bleue" dans l'exemple ci-dessus.

3
Stan1ey
function getCheckedValue(radioObj, name) {

    for (j = 0; j < radioObj.rows.length; ++j) {
        for (k = 0; k < radioObj.cells.length; ++k) {
            var radioChoice = document.getElementById(name + "_" + k);
            if (radioChoice.checked) {
                return radioChoice.value;
            }
        }
    }
    return "";
}
2
Abhaysingh N. Rajpurohit

Une méthode plus simple consiste à utiliser une variable globale js contenant simplement l’identifiant du bouton radio cliqué. Dans ce cas, vous n'avez pas à gaspiller du code dans vos listes de radios à la recherche de la valeur sélectionnée. Je l'ai fait dans les cas où j'ai une liste générée dynamiquement de 100 boutons radio ou plus. La rotation à travers eux est lente (presque imperceptible), mais c'est une solution plus facile.

vous pouvez aussi le faire avec l'id, mais vous voulez généralement juste la valeur.

<script>
var gRadioValue = ''; //global declared outside of function
function myRadioFunc(){
    var radioVal = gRadioValue;  
    // or maybe: var whichRadio = document.getElementById(gWhichCheckedId);
    //do somethign with radioVal
}
<script>

<input type="radio" name="rdo" id="rdo1" value="1" onClick="gRadioValue =this.value;"> One
<input type="radio" name="rdo" id="rdo2" value="2" onClick="gRadioValue =this.value;"> Two
...
<input type="radio" name="rdo" id="rdo99" value="99" onClick="gRadioValue =this.value;"> 99
1
Alan

vous tous pouvez tester cet exemple et facile à comprendre.

        Name:   <input type="text" id="text" class ="input">
                <input type="text" id="text1" class ="input">
        Gender: <input type="radio" id="m" class="Rm"  name="Rmale" value="Male">
                <input type="radio" id="f" class="Rm" name="Rfemale" value="Female">
        Course: <input type="checkbox" id="math" class="cm" name="Cmath" value="Math">
                <input type="checkbox" id="physic" class="cm" name="Cphysic" value="Physic">
                <input type="checkbox" id="eng" class="cm"  name="Ceng" value="English">
        <button type="button" id="b1">show</button>

// javascript

    <script>
        function getData(input){
            return document.getElementById(input).value;
        }
        function dataByClassName(st){
            var value=document.getElementsByClassName(st)
            for(var i=0;i < value.length;i++){
                if(value[i].checked){
                    return value[i].value;
                }
            }
        }
        document.getElementById("b1").onclick = function ()
        {
            var st={
                name : getData("text")+getData("text1"),
                gender : dataByClassName("Rm"),
                course : dataByClassName("cm")
            };
            alert(st.name+" "+st.gender+" "+st.course);
        };

    </script>
0
Sophy Heng

Ce n’est peut-être pas le moyen le plus efficace ... mais j’ai utilisé un identifiant sur chaque bouton radio (c’est simplement parce que je ne le passe pas sous forme réelle, c’est juste les champs bruts).

J'appelle ensuite une fonction avec un bouton, qui vérifie chaque bouton radio pour voir si elle est cochée. Pour ce faire, il utilise la fonction .checked. Si ce paramètre est défini sur true, je peux modifier la valeur d'une autre variable.

function createOutput() {
  var order = "in";
  if (document.getElementById('radio1').checked == true) {
    order = "pre";
  } else if (document.getElementById('radio2').checked == true) {
    order = "in";
  } else if (document.getElementById('radio3').checked == true) {
    order = "post";
  }
  document.getElementById('outputBox').innerHTML = order;
}
<input id="radio1" type="radio" name="order" value="preorder" />Preorder
<input id="radio2" type="radio" name="order" value="inorder" checked="true" />Inorder
<input id="radio3" type="radio" name="order" value="postorder" />Postorder
<button onclick="createOutput();">Generate Output</button>
<textarea id="outputBox" rows="10" cols="50"></textarea>

En espérant que cela soit utile, en quelque sorte,

Beanz

0
Breandán Fawcett

tu peux utiliser ça

$('input[name="field_value"]:checked').val();

ou, pour l'ancienne version de jquery

$('input[@name="field_value"]:checked').val();
0
Mughal Sahab

Puisque vous voulez l'obtenir en utilisant javascript, vous pouvez utiliser le code suivant

var val = '';
if(document.getElementById('radio1').checked) {
  val = document.getElementById('radio1').value
}else if(document.getElementById('radio2').checked) {
  val = document.getElementById('radio2').value
}
0
Nauphal

Vous pouvez faire quelque chose de très similaire à la réponse de Beanz, mais au lieu d'utiliser des identifiants, utilisez des classes pour réduire la redondance.

function getSelectedValue() {
  var radioBtns = document.getElementsByClassName("radioBtn");
  for(var i = 0; i < radioBtns.length; i++){
    if(radioBtns[i].checked){
      document.getElementById("output").textContent = radioBtns[i].value; 
    }
  }
}
<input class="radioBtn" type="radio" name="order" value="button1" />Button 1<br>
<input class="radioBtn" type="radio" name="order" value="button2" />Button 2<br>
<input class="radioBtn" type="radio" name="order" value="button3" />Button 3<br>
<button onclick="getSelectedValue();">Get Value of Selected Radio</button><br>
<textarea id="output"></textarea>

0
Emily Zhai

Essayez ceci, j'espère que celui-ci marchera

function loadRadioButton(objectName, selectedValue) {

    var radioButtons = document.getElementsByName(objectName);

    if (radioButtons != null) {
        for (var radioCount = 0; radioCount < radioButtons.length; radioCount++) {
            if (radioButtons[radioCount].value == selectedValue) {
                radioButtons[radioCount].checked = true;
            }
        }
    }
}
0
user3585199