现在有两个嵌套的datalist,每个datalist中都有一个checkbox,
我想实现这样的效果:
1 . 点击父datalist 中的checkbox 就全选 子datalist 的checkbox
2 . 单击某个全选按钮,就全选两个datalist中所有的checkbox
请问用js如何实现?谢谢
我想实现这样的效果:
1 . 点击父datalist 中的checkbox 就全选 子datalist 的checkbox
2 . 单击某个全选按钮,就全选两个datalist中所有的checkbox
请问用js如何实现?谢谢
解决方案 »
- asp.net的验证控件能做到控制文本框内容不超过255个字符吗?
- asp.net如何把数据库读出来的图片作为背景图片
- ASP.NET中的TreeView的数据绑定,出了问题,请教一下
- 为何LinkButton不能在新窗口打开
- 做项目中的心得想跟大家分享一下。
- 复合自定义控件的子控件宽度自动匹配控件的宽度?
- 有没有人使用过V-TEMPLATE这套模板引擎的
- 一个简单问题请教?
- 我有一个用VC++写的控件接收网络上传来的tcp包,如何在asp.net中把此接收到的信息显示出来(可以调用ocx的接口函数),怎么调用?有没有这方
- 【急 LINQ】求一段判断数据库表中字段的值得LINQ判断语句
- MVC 一个视图显示两张主从表关联信息
- 如何利用 Substring 截取 <%# Eval("val") %>中的字符?
function CheckAll(form)
{
for (var i=0;i<form.elements.length;i++)
{
var e = form.elements[i];
if (e.name != 'checkall' && e.name !='checkbox')
e.checked = form.checkall.checked;
}
}
</script>
=======================================
全选<INPUT id="checkall" onclick="CheckAll(this.form)" type="checkbox" value="on" name="checkall">
function selectAll(chkbox)
{
var box = chkbox;
oState = box.checked;
elem = box.form.elements;
for(i = 0; i < elem.length; i ++)
{
if(elem[i].type == "checkbox" && elem[i].id != box.id)
{
if(elem[i].checked != oState)
{
elem[i].click();
}
}
}
}
</script>
html中的代码如下 <HeaderTemplate>
<asp:CheckBox id="ckb_All" runat="server" onclick="selectAll(this);"></asp:CheckBox>
</HeaderTemplate>
<%@ Import Namespace="System.Data" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
LoadProductData();
}
} void dlstProCat_ItemDataBound(object sender, DataListItemEventArgs e)
{
DataRowView drv = e.Item.DataItem as DataRowView;
if(drv == null) return; DataRow dr = drv.Row;
DataList dlstPro = e.Item.FindControl("dlstPro") as DataList;
DataView dvPro = dr.Table.ChildRelations["ProCatShip"].ChildTable.DefaultView;
dvPro.RowFilter = "CategoryId = " + dr["CategoryID"].ToString();
dlstPro.DataSource = dvPro;
dlstPro.DataBind();
} void LoadProductData()
{
DataSet ds = CreateProductCategoryDataSet();
dlstProCat.DataSource = ds.Tables["Categories"];
dlstProCat.DataBind();
} #region sample data
static DataSet CreateProductCategoryDataSet()
{
DataSet ds = new DataSet("ProductCategorySet");
DataTable dtPro = CreateProductTable();
DataTable dtCat = CreateCategoryTable();
ds.Tables.Add(dtPro);
ds.Tables.Add(dtCat);
ds.Relations.Add("ProCatShip", dtCat.Columns["CategoryID"], dtPro.Columns["CategoryID"]); return ds;
} static DataTable CreateProductTable()
{
DataTable tbl = new DataTable("Products"); tbl.Columns.Add("ProductID", typeof(int));
tbl.Columns.Add("ProductName", typeof(string));
tbl.Columns.Add("CategoryID", typeof(int));
DataRow row = tbl.NewRow();
row[0] = 1;
row[1] = "Chai";
row[2] = 1;
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 2;
row[1] = "Chang";
row[2] = 1;
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 3;
row[1] = "Aniseed Syrup";
row[2] = 2;
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 4;
row[1] = "Chef Anton's Cajun Seasoning";
row[2] = 2;
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 5;
row[1] = "Chef Anton's Gumbo Mix";
row[2] = 2;
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 47;
row[1] = "Zaanse koeken";
row[2] = 3;
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 48;
row[1] = "Chocolade";
row[2] = 3;
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 49;
row[1] = "Maxilaku";
row[2] = 3;
tbl.Rows.Add(row); return tbl;
} public static DataTable CreateCategoryTable()
{
DataTable tbl = new DataTable("Categories"); tbl.Columns.Add("CategoryID", typeof(int));
tbl.Columns.Add("CategoryName", typeof(string));
DataRow row = tbl.NewRow();
row[0] = 1;
row[1] = "Beverages";
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 2;
row[1] = "Condiments";
tbl.Rows.Add(row); row = tbl.NewRow();
row[0] = 3;
row[1] = "Confections";
tbl.Rows.Add(row); return tbl;
} #endregion
</script><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Nested DataList</title>
<script type="text/javascript">
function chkCatPro_Clicked(sender, suredId1, suredId2)
{
var cnt = sender.parentElement.parentElement.parentElement;
var nptArr = cnt.getElementsByTagName("input");
for(var i = 0; i < nptArr.length; i++) {
if(nptArr[i].type == 'checkbox' &&
(nptArr[i].id.indexOf(suredId1) > -1 || nptArr[i].id.indexOf(suredId2) > -1)) {
nptArr[i].checked = sender.checked;
}
}
}
function chkCat_Clicked(sender, suredId)
{
var cnt = sender.parentElement;
var nptArr = cnt.getElementsByTagName("input");
for(var i = 0; i < nptArr.length; i++) {
if(nptArr[i].type == 'checkbox' && nptArr[i].id.indexOf(suredId) > -1) {
nptArr[i].checked = sender.checked;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="dlstProCat" runat="server" OnItemDataBound="dlstProCat_ItemDataBound">
<HeaderTemplate>
<asp:CheckBox ID="chkCatPro" onclick="chkCatPro_Clicked(this, 'chkCat', 'chkPro')" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkCat" onclick="chkCat_Clicked(this, 'chkPro')" runat="server" />
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label>
<div style="padding-left:20px;">
<asp:DataList ID="dlstPro" runat="server" >
<ItemTemplate>
<asp:CheckBox ID="chkPro" runat="server" />
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
</ItemTemplate>
</asp:DataList>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>