通过JavaScript来判断RadioButtonList是否被选中
由于朋友的一个系统在“提交”按钮触发后没有对RadioButtonList做必选判断,要求:RadioButtonList中必须要选中任意一个才能提交,否则不让提交,并弹出友好提示。他扔给我一个aspx页面,Button的Click事件被编译在DLL中了。
所以想到用JavaScript在页面上改一下,在Button里面添加OnClientClick事件。直接贴代码,希望给需要的人一点帮助:
1 <div>
2 意向落户地区:<asp:RadioButtonList ID="YiXiangLuoHuDiQu" runat="server" CssClass="textEnabled" RepeatDirection="Horizontal">
3 <asp:ListItem Value="金坛">金坛</asp:ListItem>
4 <asp:ListItem Value="溧阳">溧阳</asp:ListItem>
5 <asp:ListItem Value="武进">武进</asp:ListItem>
6 <asp:ListItem Value="高新区">高新区</asp:ListItem>
7 <asp:ListItem Value="天宁">天宁</asp:ListItem>
8 <asp:ListItem Value="钟楼">钟楼</asp:ListItem>
9 <asp:ListItem Value="戚墅堰">戚墅堰</asp:ListItem>
10 <asp:ListItem Value="待定">待定</asp:ListItem>
11 </asp:RadioButtonList>
12 </div>
13
14 <script language="javascript" type="text/javascript">
15 function check() {
16 var rbltable = document.getElementById("YiXiangLuoHuDiQu");
17 var rbs = rbltable.getElementsByTagName("INPUT");
18 var result = false;
19 for (var i = 0; i < rbs.length; i++) {
20 if (rbs[i].checked) {
21 result = true;
22 break;
23 }
24 }
25 if (result == false) {
26 alert('请选择意向落户地区');
27 }
28 return result;
29 }
30 </script>
31
32 <asp:Button ID="btnSubmit" runat="server" OnClientClick="javascript:return check()" OnClick="btnSubmit_Click" Text="Button" />
2 意向落户地区:<asp:RadioButtonList ID="YiXiangLuoHuDiQu" runat="server" CssClass="textEnabled" RepeatDirection="Horizontal">
3 <asp:ListItem Value="金坛">金坛</asp:ListItem>
4 <asp:ListItem Value="溧阳">溧阳</asp:ListItem>
5 <asp:ListItem Value="武进">武进</asp:ListItem>
6 <asp:ListItem Value="高新区">高新区</asp:ListItem>
7 <asp:ListItem Value="天宁">天宁</asp:ListItem>
8 <asp:ListItem Value="钟楼">钟楼</asp:ListItem>
9 <asp:ListItem Value="戚墅堰">戚墅堰</asp:ListItem>
10 <asp:ListItem Value="待定">待定</asp:ListItem>
11 </asp:RadioButtonList>
12 </div>
13
14 <script language="javascript" type="text/javascript">
15 function check() {
16 var rbltable = document.getElementById("YiXiangLuoHuDiQu");
17 var rbs = rbltable.getElementsByTagName("INPUT");
18 var result = false;
19 for (var i = 0; i < rbs.length; i++) {
20 if (rbs[i].checked) {
21 result = true;
22 break;
23 }
24 }
25 if (result == false) {
26 alert('请选择意向落户地区');
27 }
28 return result;
29 }
30 </script>
31
32 <asp:Button ID="btnSubmit" runat="server" OnClientClick="javascript:return check()" OnClick="btnSubmit_Click" Text="Button" />
做的过程中发现:RadioButtonList在客户端被翻译成了Table,通过getElementsByTagName("INPUT")方法获取它的所有子radio,对每个radio做个循环,看是否被选中,选中则返回true,未选中提示"请选择意向落户地区"返回false,下面看下被翻译出来的table内容:
浙公网安备 33010602011771号