老记不住这个js判断radio的写法

最新推荐文章于 2022-10-24 11:35:04 发布

JEFFYU328

最新推荐文章于 2022-10-24 11:35:04 发布

阅读量2k

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/JEFFYU328/article/details/18080677

版权

js 专栏收录该内容

2 篇文章

订阅专栏

这篇博客提供了一段JavaScript代码，用于在网页中检测radio按钮组的选中状态。当表单提交时，如果radio值没有改变，会弹出警告提示用户。代码包括一个onload函数来初始化已选中的radio按钮索引，以及一个check_radio函数来验证提交时的选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</script>

/* *********************************************还可以如下：（转自http://blog.sina.com.cn/s/blog_77dbebbb010124jp.html）******************************************************** */

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>text</title>
        <script>
            var chk = 0;
            window.onload=function (){
                var chkObjs = document.getElementsByName("radio");
                for(var i=0;i<chkObjs.length;i++){
                    if(chkObjs[i].checked){
                        chk = i;
                        break;
                    }
                }
            }
            function check_radio(){
                var chkObjs = document.getElementsByName("radio");
                for(var i=0;i<chkObjs.length;i++){
                    if(chkObjs[i].checked){
                        if(chk == i){
                            alert("radio值没有改变不能提交");
                            break;
                        }
                    }
                }
            }
        </script>
    </head>

    <body>
        <form action='' method='post' onsubmit='javascript:return check_radio()'>
            <input type='radio' value='1' name='radio' checked='checked'>一;
            <input type='radio' value='2' name='radio'>二;
            <input type='radio' value='3' name='radio'>三;
            <input type='radio' value='4' name='radio'>四;
            <input type='radio' value='5' name='radio'>五;

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

另外，如果使用.net控件，仍然可以使用JS获取选中值，如：
<asp:RadioButtonList ID="rblID" runat="server" RepeatColumns="7" RepeatLayout="Flow">
<asp:ListItem Value="1" Selected="True">选项一</asp:ListItem>
<asp:ListItem Value="2">选项二</asp:ListItem>
<asp:ListItem Value="3">选项三</asp:ListItem>
</asp:RadioButtonList>
注意各选项radio.ID的html生成规则分别为：rblID_0、rblID_1、rblID_2。即等同于：
<input id="rblID_0" type="radio" name="rblID" value="1" checked="checked" />
<input id="rblID_1" type="radio" name="rblID" value="2" />
<input id="rblID_2" type="radio" name="rblID" value="3" />