如何使用js获取选定的单选按钮值
Posted
技术标签:
【中文标题】如何使用js获取选定的单选按钮值【英文标题】:How to get the selected radio button value using js 【发布时间】:2011-04-21 15:17:16 【问题描述】:我正在使用此代码获取当前选定单选按钮的值,但它不起作用。
var mailcopy = document.getElementById('mailCopy').value;
如何使用 javascript 获取当前选中的单选按钮值?
【问题讨论】:
【参考方案1】:使用element.checked
属性。
【讨论】:
【参考方案2】:var mailcopy = document.getElementById('mailCopy').checked;
if(mailcopy==true)
alert("Radio Button Checked");
else
alert("Radio Button un-Checked");
【讨论】:
问题是要获取当前选中的按钮,不知道是否选中了特定按钮。【参考方案3】:单选按钮以具有相同名称和不同 ID 的组的形式出现,其中一个按钮的 checked 属性设置为 true,因此循环遍历它们直到找到它。
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);
【讨论】:
有利于兼容性,此方法也适用于旧版浏览器,html 5 之前。【参考方案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 "";
【讨论】:
【参考方案5】:如果你使用的是 jQuery,下面的代码会为你工作。
$('input[name=radioName]:checked').val();
【讨论】:
【参考方案6】:检查一下
<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
【讨论】:
我的要求完全不同,警报框会出现,但点击按钮【参考方案7】:你可以用这个
$('input[name="field_value"]:checked').val();
或者,对于旧版本的 jquery
$('input[@name="field_value"]:checked').val();
【讨论】:
【参考方案8】:如果您可以使用 jQuery "Chamika Sandamal" 答案是正确的方法。如果你不能使用 jQuery,你可以这样做:
function selectedRadio()
var radio = document.getElementsByName('mailCopy');
alert(radio[0].value);
注意事项:
一般来说,对于您希望拥有唯一 ID 的输入(不是要求,而是一种好的做法) 来自同一组的所有无线电输入必须具有相同的名称属性,例如 您必须为每个输入设置 value 属性这是一个输入收音机的例子:
<input type="radio" name="mailCopy" value="1" />1<br />
<input type="radio" name="mailCopy" value="2" />2<br />
【讨论】:
【参考方案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>");
【讨论】:
可爱。并且不需要父元素。【参考方案10】:执行此操作的更简单方法是使用一个全局 js 变量,该变量仅保存单击的单选按钮的 id。然后您不必浪费代码在您的收音机列表中寻找所选值。 在我有一个动态生成的 100 个或更多单选按钮列表的情况下,我已经这样做了。旋转穿过它们(几乎无法察觉)很慢,但这是一个更简单的解决方案。
您也可以使用 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
【讨论】:
【参考方案11】:由于您想使用纯 javascript 获取它,您可以使用以下代码
var val = '';
if(document.getElementById('radio1').checked)
val = document.getElementById('radio1').value
else if(document.getElementById('radio2').checked)
val = document.getElementById('radio2').value
【讨论】:
【参考方案12】:嘿,你必须这样做。
function checkRadio ()
if(document.getElementById('user1').checked)
return $('#user1').val();
else if(document.getElementById('user2').checked)
return $('#user2').val();
【讨论】:
【参考方案13】:也许我在这里遗漏了一些东西,但是好的旧标准 JS 不能工作吗?我的意思是:
var selectedOption = document.getElementById('your-form-name')['radio-group-name'].value;
...这当然只有在为您的无线电输入元素提供“值”时才有效。
<input type="radio" name="radio-group-name" value="red" checked>
<input type="radio" name="radio-group-name" value="blue">
上例中的值应为“红色”或“蓝色”。
【讨论】:
【参考方案14】:可能不是最有效的方式...但我在每个单选按钮上都使用了一个 ID(这只是因为我没有将它作为实际表单传递,它只是原始字段)。
然后我用一个按钮调用一个函数,它检查每个单选按钮是否被选中。它使用.checked
函数执行此操作。如果设置为 true,我可以更改另一个变量的值。
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>
希望这在某种程度上有用,
豆豆
【讨论】:
【参考方案15】:您可以做一些与 Beanz 的回答非常相似的事情,但不要使用 ID,而是使用类来减少冗余。
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>
【讨论】:
【参考方案16】:这个例子大家可以测试一下,通俗易懂。
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>
【讨论】:
【参考方案17】:试试这个,希望这个能用
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;
【讨论】:
【参考方案18】:用途:
document.querySelector('#elementId:checked').value;
这将返回所选单选按钮的值。
【讨论】:
以上是关于如何使用js获取选定的单选按钮值的主要内容,如果未能解决你的问题,请参考以下文章