Javascript 如何使用js获取所选单选按钮值

我正在使用此代码获取当前选定单选按钮的值，但它不起作用

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

---

如何使用Javascript获取当前选定的单选按钮值？

使用

元素。选中
属性
 单选按钮以组的形式出现，这些组具有相同的名称和不同的ID，其中一个将checked属性设置为true，因此在它们上循环，直到找到为止

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

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

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

函数getCheckedRadio（无线电组）{
对于（变量i=0；i
函数getCheckedValue（radioObj，名称）{
对于（j=0；j
如果您正在使用jQuery，以下代码将适用于您

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

检查这个

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

男性


女性
$（文档）.ready（函数（）{
$（“.gender”）.change（函数（）{
var val=$（'.gender:checked'）.val（）；
警报（val）；
});
});

您可以使用此

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

或者，对于较旧版本的jquery

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

如果您可以使用jQuery“Chamika Sandamal”，那么答案就是正确的。在无法使用jQuery的情况下，可以执行以下操作：

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

注意事项：


一般来说，对于您希望具有唯一ID的输入（不是要求，而是良好实践）
例如，来自同一组的所有无线电输入必须具有相同的name属性
必须为每个输入设置值属性

以下是输入无线电的示例：

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

1

2

HTML

性别

男性

女性


JS

var-gender=document.querySelector（'input[name=“gender”]：checked'）。值；
document.writeln（“您输入“+gender+”作为您的性别
”；
一种更简单的方法是使用一个全局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


var gRadioValue=''//函数外部声明的全局
函数myRadioFunc（）{
var radioVal=梯度值；
//或者：var whichRadio=document.getElementById（gWhichCheckedId）；
//用radioVal做点什么
}
一个
两个
...
99
由于您希望使用普通javascript获得它，因此可以使用以下代码

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

你必须这样做

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

也许我在这里遗漏了一些东西，但是好的旧标准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">



在上述示例中，该值应为“红色”或“蓝色”。
可能不是最有效的方法。。。但我在每个单选按钮上都使用了一个ID（这只是因为我没有将其作为实际表单传递，它只是原始字段）

然后我调用一个带有按钮的函数，该函数检查每个单选按钮，看它是否被选中。它使用
.checked
功能完成此操作。如果设置为true，我可以更改另一个变量的值


函数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；
}
Preorder
有序
邮购
产生产出
您可以做一些与Beanz的答案非常类似的事情，但不要使用ID，而是使用类来减少冗余


函数getSelectedValue（）{
var radioBtns=document.getElementsByClassName（“radioBtn”）；
对于（变量i=0；i

按钮1

按钮2

按钮3

获取所选收音机的值

所有人都可以测试此示例，并且易于理解

        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>

函数getData（输入）{
return document.getElementById（input）.value；
}
函数DataCyclassName（st）{
var值=document.getElementsByClassName（st）
对于（变量i=0；i

试试这个，我希望这个能起作用

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

函数加载RadioButton（objectName，selectedValue）{
var radioButtons=document.getElementsByName（objectName）；
if（单选按钮！=null）{
对于（var radioCount=0；radioCount        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>

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

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

document.querySelector('#elementId:checked').value;