如何使用js获取选定的单选button值
我正在使用此代码来获取当前选定的单选button的值，但它不起作用。
var mailcopy = document.getElementById('mailCopy').value; 如何使用Javascript获取当前选定的单选button值？
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>");
如果你使用jQuery，下面的代码将适用于你。
$('input[name=radioName]:checked').val();
单选button进来成组，具有相同的名称和不同的ID，其中一个将检查属性设置为真，所以循环，直到你find它。
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); }
检查这个
<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>
例
也许我在这里错过了一些东西，但是不好的旧标准JS工作？ 我的意思是：
var selectedOption = document.getElementById('your-form-name')['radio-group-name'].value;
…当然，如果为您的收音机input元素提供了“价值”，这是唯一有效的。
<input type="radio" name="radio-group-name" value="red" checked> <input type="radio" name="radio-group-name" value="blue">
在上面的例子中，该值应该是“红色”或“蓝色”。
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 ""; }
这样做的一个简单的方法是使用一个全局的jsvariables，它只保存点击单选button的id。 那么你不必浪费代码，通过你的电台列表寻找选定的价值。 我已经做到这一点，我有一个dynamic生成的100个或更多的单选button的列表。 通过他们旋转（几乎察觉不到）缓慢，但这是一个更容易的解决scheme。
你也可以用id做这个，但是你通常只是想要这个值。
<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
你可以使用这个
$('input[name="field_value"]:checked').val();
或者，对于jQuery的老版本
$('input[@name="field_value"]:checked').val();
可能不是最有效的方法…但是我在每个单选button上使用了一个ID（这是因为我没有将它作为一个实际的forms传递，它只是原始字段）。
然后我用一个button调用一个函数，该button检查每个单选button，看它是否被检查。 它使用.checked函数执行此操作。 如果这被设置为true，我可以改变另一个variables的值。
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>
你可以做一些与Beanz的答案非常相似的东西，而不是使用ID，使用类来减less冗余。
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>
你们所有人都可以testing这个例子，并且很容易理解。
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>
如果你可以使用jQuery“Chamika Sandamal”的答案是正确的路要走。 在这种情况下，你不能使用jQuery，你可以这样做：
function selectedRadio() { var radio = document.getElementsByName('mailCopy'); alert(radio[0].value); }
笔记：
- 一般来说，你想拥有唯一的ID（不是一个要求，但一个很好的做法）
- 例如，来自同一组的所有无线电input必须具有相同的名称属性
- 您必须为每个input设置值属性
这是一个input无线电的例子：
<input type="radio" name="mailCopy" value="1" />1<br /> <input type="radio" name="mailCopy" value="2" />2<br />
既然你想用普通的javascript来获得它，你可以使用下面的代码
var val = ''; if(document.getElementById('radio1').checked) { val = document.getElementById('radio1').value }else if(document.getElementById('radio2').checked) { val = document.getElementById('radio2').value }
var mailcopy = document.getElementById('mailCopy').checked; if(mailcopy==true) { alert("Radio Button Checked"); } else { alert("Radio Button un-Checked"); }
嗨，你必须这样做。
function checkRadio () { if(document.getElementById('user1').checked) { return $('#user1').val(); }else if(document.getElementById('user2').checked) { return $('#user2').val(); } }
使用element.checked属性。
