[总结]CheckBoxList js中(zhuan)

lick
浏览: 50225 次
性别:
来自: 大连
最近访客更多访客>>

itcyc小狐狸
博主相关

博客
微博
相册
留言
关于我
文章分类

全部博客 (55)
社区版块

存档分类

UI Web 浏览器 Security C
前台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>

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>

后台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 }
分享到：