CheckBoxList,RadioButtonList，checkbox，radio等在控件在js中的调用
Posted on 2008-09-27 16:23 jiangxin 阅读(1268) 评论(0) 编辑 收藏 举报前台aspx文件:
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>
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>
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>
后台cs文件
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11 using System.Data.SqlClient;
12
13 public partial class chkandrdo : System.Web.UI.Page
14 {
15 protected void Page_Load(object sender, EventArgs e)
16 {
17 //WebControl -> CheckBoxList
18 if (!Page.IsPostBack)
19 BindchkBox1();
20 //WebControl -> RadioButtonList
21 if (!Page.IsPostBack)
22 BindradButList();
23
24 //HTMLControl -> ServerControl -checkbox
25 if (!Page.IsPostBack)
26 BindServerCheckBox();
27
28 }
29
30
31 public void BindchkBox1()
32 {
33 ListItem li = new ListItem("江苏", "JS");
34 chkBox1.Items.Insert(0, li);
35 li = new ListItem("上海", "SH");
36 chkBox1.Items.Insert(0, li);
37 }
38
39 protected void btnCheck_Click(object sender, EventArgs e)
40 {
41 for (int i = 0; i < chkBox1.Items.Count; i++)
42 {
43 if (chkBox1.Items[i].Selected)
44 Response.Write(chkBox1.Items[i].Value);
45 }
46
47 for (int i = 0; i < radButList.Items.Count; i++)
48 {
49 if (radButList.Items[i].Selected)
50 Response.Write(radButList.Items[i].Value);
51 }
52 }
53
54
55 protected void BindradButList()
56 {
57 ListItem li = new ListItem("南通", "NT");
58 radButList.Items.Insert(0, li);
59 li = new ListItem("苏州", "SZ");
60 radButList.Items.Insert(0, li);
61 }
62
63 protected void BindServerCheckBox()
64 {
65 chkBox2.Attributes.Add("Region", "Provience");
66 chkBox2.Attributes.Add("onclick","changeidd('ddd');");//这里我为chkBox2注册了一个事件
67 chkBox3.Value = "SH";
68 chkBox3.Attributes.Add("Region", "Provience");
69
70 radButList2.Value = "海阔";
71 Response.Write(radButList2.TagName);//得到input
72 radButList3.Value = "天空";
73 chkBox2.Name = "RadioButtonListArr";//这里明明可以设置name 属性，但是却没有什么作用，不知道为什么？？？
74 chkBox3.Name = "RadioButtonListArr";
75 }
76
77 protected void btnCheck2_ServerClick(object sender, EventArgs e)
78 {
79 Response.Write(chkBox2.Value);//但是如果我想得到所有选中的由HTML转化过来的服务器控件的值，我该怎么办呢？？
80 Response.Write(Request.Form["radButList2Name"]);
81 }
82 }
83
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11 using System.Data.SqlClient;
12
13 public partial class chkandrdo : System.Web.UI.Page
14 {
15 protected void Page_Load(object sender, EventArgs e)
16 {
17 //WebControl -> CheckBoxList
18 if (!Page.IsPostBack)
19 BindchkBox1();
20 //WebControl -> RadioButtonList
21 if (!Page.IsPostBack)
22 BindradButList();
23
24 //HTMLControl -> ServerControl -checkbox
25 if (!Page.IsPostBack)
26 BindServerCheckBox();
27
28 }
29
30
31 public void BindchkBox1()
32 {
33 ListItem li = new ListItem("江苏", "JS");
34 chkBox1.Items.Insert(0, li);
35 li = new ListItem("上海", "SH");
36 chkBox1.Items.Insert(0, li);
37 }
38
39 protected void btnCheck_Click(object sender, EventArgs e)
40 {
41 for (int i = 0; i < chkBox1.Items.Count; i++)
42 {
43 if (chkBox1.Items[i].Selected)
44 Response.Write(chkBox1.Items[i].Value);
45 }
46
47 for (int i = 0; i < radButList.Items.Count; i++)
48 {
49 if (radButList.Items[i].Selected)
50 Response.Write(radButList.Items[i].Value);
51 }
52 }
53
54
55 protected void BindradButList()
56 {
57 ListItem li = new ListItem("南通", "NT");
58 radButList.Items.Insert(0, li);
59 li = new ListItem("苏州", "SZ");
60 radButList.Items.Insert(0, li);
61 }
62
63 protected void BindServerCheckBox()
64 {
65 chkBox2.Attributes.Add("Region", "Provience");
66 chkBox2.Attributes.Add("onclick","changeidd('ddd');");//这里我为chkBox2注册了一个事件
67 chkBox3.Value = "SH";
68 chkBox3.Attributes.Add("Region", "Provience");
69
70 radButList2.Value = "海阔";
71 Response.Write(radButList2.TagName);//得到input
72 radButList3.Value = "天空";
73 chkBox2.Name = "RadioButtonListArr";//这里明明可以设置name 属性，但是却没有什么作用，不知道为什么？？？
74 chkBox3.Name = "RadioButtonListArr";
75 }
76
77 protected void btnCheck2_ServerClick(object sender, EventArgs e)
78 {
79 Response.Write(chkBox2.Value);//但是如果我想得到所有选中的由HTML转化过来的服务器控件的值，我该怎么办呢？？
80 Response.Write(Request.Form["radButList2Name"]);
81 }
82 }
83
