JQuery设置与获取RadioButtonList和CheckBoxList的值
有这样一个问题,要获取ASP.NET控件RadioButtonList的值,首先想到的就是$("#<%=RadioButtonList1.ClientID %>").val();结果返回为空。于是在浏览器查看HTML文本:
发现RadioButtonList和CheckBoxList都被解析为Table,并且每个子项由一个radio(checkbox)和label构成,label保存文本信息。
于是想到了下面的方法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 $(document).ready(function () { 2 3 $("#btnSelRadioList").click(function () { 4 var sValue = $("#<%=RadioButtonList1.ClientID %>").find("input[type='radio']:checked").val(); 5 var sText = $("#<%=RadioButtonList1.ClientID %>").find("input[type='radio']:checked").next().text() 6 7 alert(sValue + "|" + sText); 8 }); 9 10 $("#btnSelCheckBoxList").click(function () { 11 var sValue = ""; 12 var sText = ""; 13 $("#<%=CheckBoxList1.ClientID %>").find("input[type='checkbox']:checked").each(function () { 14 sValue += $(this).val() + ";"; 15 sText += $(this).next().text() + ";"; 16 }) 17 18 alert(sValue + "|" + sText); 19 }); 20 });
CheckBoxList可能会多选,所有需要遍历选中的项。上面的几句js代码顺利地取到了值。
设置默认选中的值:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 //设置RadioButtonList1第二项选中 2 $("#<%=RadioButtonList1.ClientID %>").find("input[type='radio']")[1].checked = true; 3 4 //设置CheckBoxList1第二、三项选中 5 $("#<%=CheckBoxList1.ClientID %>").find("input[type='checkbox']")[1].checked = true; 6 $("#<%=CheckBoxList1.ClientID %>").find("input[type='checkbox']")[2].checked = true;
完整的代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 2 <script> 3 $(document).ready(function () { 4 5 //设置RadioButtonList1第二项选中 6 $("#<%=RadioButtonList1.ClientID %>").find("input[type='radio']")[1].checked = true; 7 8 //设置CheckBoxList1第二、三项选中 9 $("#<%=CheckBoxList1.ClientID %>").find("input[type='checkbox']")[1].checked = true; 10 $("#<%=CheckBoxList1.ClientID %>").find("input[type='checkbox']")[2].checked = true; 11 12 13 $("#btnSelRadioList").click(function () { 14 var sValue = $("#<%=RadioButtonList1.ClientID %>").find("input[type='radio']:checked").val(); 15 var sText = $("#<%=RadioButtonList1.ClientID %>").find("input[type='radio']:checked").next().text() 16 17 alert(sValue + "|" + sText); 18 }); 19 20 21 $("#btnSelCheckBoxList").click(function () { 22 var sValue = ""; 23 var sText = ""; 24 $("#<%=CheckBoxList1.ClientID %>").find("input[type='checkbox']:checked").each(function () { 25 sValue += $(this).val() + ";"; 26 sText += $(this).next().text() + ";"; 27 }) 28 29 alert(sValue + "|" + sText); 30 }); 31 }); 32 </script> 33 <asp:RadioButtonList ID="RadioButtonList1" runat="server"> 34 <asp:ListItem Value="1">北京</asp:ListItem> 35 <asp:ListItem Value="2">上海</asp:ListItem> 36 <asp:ListItem Value="3">南京</asp:ListItem> 37 </asp:RadioButtonList> 38 <input id="btnSelRadioList" type="button" value="RadioButtonList选中项" /> 39 <asp:CheckBoxList ID="CheckBoxList1" runat="server"> 40 <asp:ListItem Value="1">北京</asp:ListItem> 41 <asp:ListItem Value="2">上海</asp:ListItem> 42 <asp:ListItem Value="3">南京</asp:ListItem> 43 </asp:CheckBoxList> 44 <input id="btnSelCheckBoxList" type="button" value="CheckBoxList选中项" />
posted on 2013-12-11 16:25 nxgliming 阅读(1998) 评论(1) 编辑 收藏 举报