前臺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 }
