Jak uzyskać wybraną wartość przycisku opcji za pomocą js

Question

Używam tego kodu, aby uzyskać wartość aktualnie wybranego przycisku opcji, ale to nie działa.

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

Jak uzyskać aktualnie wybraną wartość przycisku opcji za pomocą Javascript?

Answer 1

Użyj właściwości element.checked.

Answer 2

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

if(mailcopy==true) 
{ 
    alert("Radio Button Checked"); 
} 
else 
{ 
    alert("Radio Button un-Checked"); 
} 

Answer 3

przyciski radiowe są w grupach, które mają taką samą nazwę i różne identyfikatory, jeden z nich będzie miał zaznaczone właściwość ma wartość true, więc pętlę nad nimi, dopóki można go znaleźć.

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); 
} 

Answer 4

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 ""; 
} 

Answer 5

Jeśli używasz jQuery, następujący kod będzie pracować dla Ciebie.

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

Answer 6

check to

<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> 

Example

Answer 7

można użyć tej

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

lub dla starszej wersji jQuery

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

Answer 8

Jeśli możesz użyć jQuery "Chamika Sandamal" odpowiedź jest właściwą drogą. W przypadku, gdy nie można użyć jQuery można zrobić coś takiego:

function selectedRadio() { 
    var radio = document.getElementsByName('mailCopy'); 
    alert(radio[0].value); 
} 

Uwagi:

• ogólnie dla wejść chcesz mieć unikalne identyfikatory (nie wymóg, ale dobra praktyka)
• Wszystkie wejścia radiowe, które są z tej samej grupy muszą mieć ten sam atrybut nazwę, na przykład
• Musisz ustawić atrybut wartość dla każdego wejścia

Oto przykład z radia wejściowych:

<input type="radio" name="mailCopy" value="1" />1<br /> 
<input type="radio" name="mailCopy" value="2" />2<br /> 

Answer 9

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>"); 

Answer 10

Prostszym sposobem osiągnięcia tego jest użycie zmiennej js globalnego że po prostu przechowuje identyfikator klikniętego przycisku radiowego. Wtedy nie musisz tracić kodu obracającego się na liście radiowej szukającej wybranej wartości. Zrobiłem to w przypadkach, gdy mam dynamicznie generowaną listę 100 lub więcej przycisków radiowych. kręcenie nimi jest (prawie niedostrzegalne) wolne, ale jest to łatwiejsze rozwiązanie.

możesz również zrobić to z identyfikatorem, ale zwykle chcesz tylko wartość.

<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 

Answer 11

Skoro chcesz się go za pomocą zwykłego JavaScript, można użyć następującego kodu

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

Answer 12

Hy, trzeba to zrobić w ten sposób.

function checkRadio() { 
    if(document.getElementById('user1').checked) { 
     return $('#user1').val(); 
    }else if(document.getElementById('user2').checked) { 
     return $('#user2').val(); 
    } 
} 

Answer 13

Może brakuje mi tutaj czegoś, ale czy stary, standardowy JS nie działa? Mam na myśli:

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

... który jest ważny tylko wtedy, gdy podałeś "wartość" dla elementów wejścia radiowego.

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

W powyższym przykładzie wartość powinna być "czerwona" lub "niebieska".

Answer 14

Prawdopodobnie nie jest to najbardziej efektywny sposób ... ale użyłem ID na każdym przycisku radiowym (dzieje się tak tylko dlatego, że nie przekazuję go jako rzeczywistej formy, to tylko surowe pola).

Następnie wywołuję funkcję za pomocą przycisku, który sprawdza każdy przycisk radiowy, aby sprawdzić, czy jest zaznaczona. Robi to za pomocą funkcji .checked. Jeśli jest ustawione na true, mogę zmienić wartość innej zmiennej.

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>

Nadzieja ta jest przydatna, w jakiś sposób,

Beanz

Answer 15

Można zrobić coś bardzo podobnego do odpowiedzi Beanz, ale zamiast korzystania z identyfikatorów, zajęcia w ruchu, aby zmniejszyć redundancję .

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>

Answer 16

wszystko można przetestować ten przykład i łatwy do zrozumienia.

 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>