前台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" οnclick="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" οnclick="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 }