欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

[总结]CheckBoxList js中(zhuan) UIWeb浏览器SecurityC 

程序员文章站 2022-07-12 15:19:46
...
前台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 }

83