１.CheckBoxList js（http://hi.baidu.com/xuexiang516168/blog/item/bf772a324be85049ac4b5f3e.html）-优快云博客

本文介绍如何在JavaScript中操作ASP.NET中的CheckBoxList、RadioButtonList等控件，包括获取选中状态、值及实现全选与反选等功能。

2009-10-30 12:04

1 <%@ Page Language="C#" AutoEventWireup= "true" CodeFile= "chkandrdo.aspx.cs" Inherits= "chkandrdo" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
4
5 <html xmlns= "http://www.w3.org/1999/xhtml" >
6 <head runat= "server" >
7 <title>CheckBoxList,RadioButtonList，checkbox，radio等在控件在js中的调用</title>
8 </head>
9 <body>
10 <form id= "form1" runat= "server" >
11 <div>
12 <%--服务器端控件--%>
13 <asp:CheckBoxList ID= "chkBox1" runat= "server" onclick= "javascript:CheckASP(this);" ></asp:CheckBoxList><br/>
14 <asp:RadioButtonList ID= "radButList" runat= "server" onClick= "javascript:Vadaitorvalue(this);" ></asp:RadioButtonList><br/>
15 <asp:Button ID= "btnCheck" runat= "server" Text= " 检测 " OnClientClick= "return CheckValue();" OnClick= "btnCheck_Click" /><br/>
16 <%--服务器端控件--%>
17 <br/><br/><br/>
18
19 <%--由HTMLControl转化来的服务器控件--%>
20 <a href= "javascript:CheckAll();" >全选</a> <a href= "javascript:Reservall();" >反选</a>.
21 <br/><br/>
22 <input id= "chkBox2" runat= "server" type= "checkbox" /><br /><%--这里我设置了name属性，但是在浏览器下，这个name属性却变成了和ID同值，不知道怎么在客户端中取得这个值。--%>
23 <input id= "chkBox3" runat= "server" type= "checkbox" onclick= "javascript:CheckChkBoxValue(" chkBox3 ");" /><br />
24 <input id= "radButList2" runat= "server" type= "radio" name= "radButList2Name" />海阔<br />
25 <input id= "radButList3" runat= "server" type= "radio" name= "radButList2Name" />天空<br />
26 <input id= "btnCheck2" type= "button" value= " 检测 " runat= "server" onserverclick= "btnCheck2_ServerClick" /><br />
27 <%--由HTMLControl转化来的服务器控件--%>
28 <br/><br/><br/>
29 <a href= "javascript:CheckAllHtmlCheckBox('CheckboxProvience');" >全选</a> <a href= "javascript:ReservallCheckBox('CheckboxProvience');" >反选</a>.
30 <br/><br/>
31 <input id= "Checkbox1" type= "checkbox" name= "CheckboxProvience" /><br />
32 <input id= "Checkbox2" type= "checkbox" name= "CheckboxProvience" /><br />
33 <input id= "Checkbox3" type= "checkbox" name= "CheckboxProvience" /><br />
34 <input id= "Radio2" type= "radio" name= "Provience" />
35 <input id= "Radio1" type= "radio" name= "Provience" /></div>
36 </form>
37 </body>
38 </html>
js 文件
1 <script language= "javascript" type= "text/javascript" >
2
3 function CheckASP( object )
4 {
5 //alert(object.length); //这里我们得不到，原因是在客户端生成的代码改变了
6 //for(var i=0;i<object.length;i++)
7 //if(object[i].checked)
8 //alert(object[i].value);
9
10 //如果这里我们想得到要选中的值，方法还是有的，但是和常规的有所不同
11 var chkInput = object .getElementsByTagName( "INPUT" );
12 var chkLable = object .getElementsByTagName( "Label" );
13 for (var i=0;i<chkInput.length;i++)
14 {
15 if (chkInput[i]. checked )
16 {
17 alert(chkLable[i].innerHTML);
18 }
19 }
20 }
21
22 function Vadaitorvalue( object )
23 {
24 var radInput = object .getElementsByTagName( "INPUT" );
25 var radLable = object .getElementsByTagName( "Label" );
26
27 for (var i=0;i<radInput.length;i++)
28 {
29 if (radInput[i]. checked )
30 {
31 alert(radLable[i].innerHTML);
32 }
33 }
34
35 }
36
37
38 function CheckValue()
39 {
40 //在JS端调用CheckBoxList
41 var chkObject = document.getElementById( '<%=chkBox1.ClientID%>' );
42 var chkInput =chkObject.getElementsByTagName( "INPUT" );
43 for (var i=0;i<chkInput.length;i++)
44 {
45 if (chkInput[i]. checked )
46 {
47 alert(chkInput[i].value); // 这里我们只能得到这个复选框中是否存在选中的项目,而不能在客户端得到选中项的值,而且这个也和其它的控件有所不同.
48 return true ;
49 }
50 }
51
52 //在Js端调用RadioButtonList
53 var rdoObject = document.getElementById( "radButList" );
54 var rdoInput = rdoObject.getElementsByTagName( "INPUT" );
55 for (var i=0;i<rdoInput.length;i++)
56 {
57 if (rdoInput[i]. checked )
58 {
59 alert(rdoInput[i].value);
60 return true ;
61 }
62 }
63 return false ;
64 }
65
66 function CheckAll()
67 {
68 var object = document.getElementsByName( "Region" ); //不能用document.getElementsByName("Provience")来得到这里的值，如果我想要获得这个name为provience的全部值，我要怎么做呢？？
69 alert( object .length);
70
71 //在这里始终不能取得由HTML控件CheckBox转化过来的WebControl的所有个数，不知道这个怎么解决。
72
73 //取得所有由HTML转化过来的WebControl的
74 var objet = document.getElementsByName( "radButList2Name" );
75 for (var i=0;i<objet.length;i++)
76 {
77 if (objet[i]. checked )
78 alert(objet[i].value);
79 }
80 }
81
82 function Reservall()
83 {
84 //由于这个由Html转化过来的服务器控件的名字不能确定，所以这个也不能得到反选
85 //后台cs文件中对于由html转化过来的服务器控件的明明有个name属性，不知道为什么这里就是不能设置
86 }
87
88 function changeidd(str)
89 {
90 alert(str);
91 }
92
93 function CheckChkBoxValue( object )
94 {
95 alert( object .value);
96 alert( object .getAttribute( "Region" )); //这里竟然可以得到这个Provience ，但是还是不能得到全部的有region这个域的个数。
97 // var ob= document.getArrtibute("Region");
98 // alert(ob.length);
99 }
100
101 function CheckAllHtmlCheckBox(obj)
102 {
103 var object = document.getElementsByName(obj);
104 for (var i=0;i< object .length;i++)
105 {
106 object [i]. checked = true ;
107 }
108 }
109
110 function ReservallCheckBox(obj)
111 {
112 var object = document.getElementsByName(obj);
113 for (var i=0;i< object .length;i++)
114 {
115 object [i]. checked =! object [i]. checked ;
116 }
117 }
118
119 </script>