javascript中获取radio的值

最新推荐文章于 2021-12-20 19:29:22 发布

lishushan

最新推荐文章于 2021-12-20 19:29:22 发布

阅读量674

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript ASP.net ASP HTML QQ ViewUI

本文链接：https://blog.csdn.net/lishushan/article/details/83529149

版权

JavaScript 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

Radio 是 HTML 中的单选框，同一个 form 中，name 相同的 Radio 构成一组，这一组中最多只允许有一个 Radio 被选中。

如果将 form 提交到服务器端 ASP 程序，ASP 程序要获得用户选择的那个 Radio 的 value 是非常方便的，用 request.Form("RadioName")，不必理会有几个 Radio。

但在 JS(JavaScript) 中就要复杂多了，我们不能像对其它元素（如：文本框）一样，使用 formid.objName.value 来取值，我们应该循环这个组的 Radio，判断其 checked 属性，再取值。

为了方便使用javascript获取radio的值，我写了一个通用的函数来实现：

比如，我们有一个name属性为：“myradio”的单选控件组，要得到选中的值，只需这样调用就可以了：

var RValue;

RValue=GetRadioValue("myradio");

如果没有给出的radioname控件，则直接返回null，或者这一组控件没有被选择的项，则也返回null。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/liu_binq63/archive/2008/04/29/2342942.aspx

javascript获取单选按钮(radio)组的值和修改选中项

http://hi.baidu.com/lysoncn/blog/item/315744d94b0cf5ec39012fda.html

js获取单选按钮(radio)组的值和修改选中项

JScript code
    function checks()
    {
        var radios=document.getElementsByName("radio1");
        for(var i=0;i<radios.length;i++)
        {
            if(radios[i].checked==true)
            {
                alert(radios[i].value);
            }
        }
    }

获取单选按钮(radio)组的值和修改选中项
看到很多帖子里说js获取单选按钮(radio)组的值可以直接用document.getElementById("oper").value,虽然跟单选按钮组一样的下拉列表(也是列表项的数组)也是一个数组，用这种方式可以获到下拉列表的值,但是单选按钮组却获不到所选的值。仔细研究了下，总结如下：

与下拉列表不同，单选按钮须用this.form.oper或者document.getElementsByName('oper')方式获取该数组对象，document.getElementById('oper')不能获取该数组对象(select可以)。而且要获取值须通过一循环判断获取，不能直接用.value(select可以)。而要改变单选按钮组的

选中项，也须用循环判断改变各个单选按钮的value。

测试代码radio.html 如下:

=============================================================================

<html>

//求单选按纽的值，适用单选项及多选项。未选返回false；有选择项，返回选项值。

function getRadio(oRadio){

var oRadioLength= oRadio.length;

var oRadioValue = false;

//alert("oRadioLength:["+oRadioLength+"]");

if (oRadioLength== undefined){

if (oRadio.checked){

oRadioValue = oRadio.value;

}

}else{

for (i=0;i<oRadioLength;i++){

//alert("oRadio["+i+"]:"+oRadio[i].checked+"/"+oRadio[i].value);

if (oRadio[i].checked){

oRadioValue = oRadio[i].value;

break;

}

return oRadioValue;

}

//方法改进：

//求单选按纽的值，传radio名字作为参数。未选返回false；有选择项，返回选项值。

function getRadioValue(name){

var radioes = document.getElementsByName(name);

for(var i=0;i<radioes.length;i++)

{

if(radioes[i].checked){

return radioes[i].value;

}

return false;

}

http://hi.baidu.com/wuxinxi007/blog/item/2e6573545822c9183b2935db.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript 获取 radio 选中值</title>
<script language="javascript" type="text/javascript">
        //Copyright 2008
        //By 小吴同学 QQ:100052800
        //Date 2008-11-25

        //$写法，用于获取元素ID名称
        function $(id){return document.getElementById(id);}
        //获取 radio 选中值
        function GetValue(){
            //获取 radio 所在容器名，根据容器名称搜索 radio 的标签 input
            var radios = $("radios").getElementsByTagName("input");
            //初始化对象
            var grade = "";
            //是否选中 radio,默认不选中，radio 可指定 checked="checked" 不受 flag 影响
            var flag = false;
            //根据容器中搜索到的 input 标签的个数（长度）进行遍历
            for(var i=0;i<radios.length;i++){
                //如果当前有选中
                if(radios[i].checked == true){
                    //赋值
                    grade = radios[i].value;
                    //赋值
                    flag = true;
                    //结束循环
                    break;
                }
            }
            //判断 radio 是否有选中
            if(!flag){
                alert("No choose");
                return;
            }else{
                alert(grade);
            }
        }
</script>
</head>

<body style="font:12px 'Microsoft Sans Serif'">
    <div id="radios">
        <input name="radio" type="radio" value="1"/>1
        <input name="radio" type="radio" value="2" />2
        <input name="radio" type="radio" value="3" />3
        <input name="radio" type="radio" value="4" />4
        <input name="radio" type="radio" value="5" />5
        <input name="button" type="button" value="GetValue" οnclick="GetValue()"/>
    </div>
</body>
</html>

lishushan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript中获取radio的值

Radio 是 HTML 中的单选框，同一个 form 中，name 相同的 Radio 构成一组，这一组中最多只允许有一个 Radio 被选中。如果将 form 提交到服务器端 ASP 程序，ASP 程序要获得用户选择的那个 Radio 的 value 是非常方便的，用 request.Form("RadioName")，不必理会有几个 Radio。但在 JS(JavaScript) 中...
复制链接

扫一扫

专栏目录