JS全选问题 复选框是.net服务器控件checkBox 在GridView中的模板列
现在的问题是,全选能选,想非全选checkbox为非选状态,则全选checkbox也为非选状态,
如下是我的JS代码:
function selectall(obj)
{
for (var i=0; i <obj.form.elements.length; i++)
{
if (obj.form.elements[i].type == 'checkbox ' && obj.form.elements[i] != obj)
{
obj.form.elements[i].checked = obj.checked;
tr_bgcolor(obj.form.elements[i]);
}
}
}
单选事件如下:
function tr_bgcolor(c)
{
var tr = c.parentNode.parentNode;
tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6 ' : '#FEDFDC ' : tr.style.backgroundColor = c.checked ? '#add6d6 ' : ' ';
}
哪位帮帮小弟喽!或者哪位给一个完整的JS给小弟!
[解决办法]
添加checkbox单击事件 onclick;
function checkselect(obj)
{
var isSelectAll = true;
for (var i=0; i <obj.form.elements.length; i++)
{
if (obj.form.elements[i].type == 'checkbox ' && obj.form.elements[i] != obj)
{
if(!obj.form.elements[i].checked)
{
isSelectAll = false;
break;
}
}
}
document.getElementById( "全选ID ").checked = isSelectAll;
}
[解决办法]
// DEMO
<%@ Page Language= "C# " %>
<%@ Import Namespace= "System.Data " %>
<%--http://community.csdn.net/Expert/TopicView3.asp?id=5714048--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script runat= "server ">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
LoadProductData();
}
}
void LoadProductData()
{
DataTable dt = CreateSampleProductData();
GridView1.DataSource = dt;
GridView1.DataBind();
}
#region sample data
static DataTable CreateSampleProductData()
{
DataTable tbl = new DataTable( "Products ");
tbl.Columns.Add( "ProductID ", typeof(int));
tbl.Columns.Add( "ProductName ", typeof(string));
tbl.Columns.Add( "UnitPrice ", typeof(decimal));
tbl.Columns.Add( "CategoryID ", typeof(int));
tbl.Rows.Add(1, "Chai ", 18, 1);
tbl.Rows.Add(2, "Chang ", 19, 1);
tbl.Rows.Add(3, "Aniseed Syrup ", 10, 2);
tbl.Rows.Add(4, "Chef Anton 's Cajun Seasoning ", 22, 2);
tbl.Rows.Add(5, "Chef Anton 's Gumbo Mix ", 21.35, 2);
tbl.Rows.Add(47, "Zaanse koeken ", 9.5, 3);
tbl.Rows.Add(48, "Chocolade ", 12.75, 3);
tbl.Rows.Add(49, "Maxilaku ", 20, 3);
return tbl;
}
#endregion
</script>
<html xmlns= "http://www.w3.org/1999/xhtml " >
<head runat= "server ">
<title> CSDN_GridViewAllAndRowCheckBox </title>
<script type= "text/javascript ">
// 选择 GridView 中指定的 checkbox
function chkAll(sender)
{
var grd = document.getElementById( "GridView1 ");
var chkArr = grd.getElementsByTagName( "input ");
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkItem ") > -1) {
chkArr[i].checked = sender.checked;
}
}
}
// 同步chkItem和chkAll
function chkItem(sender)
{
var grd = document.getElementById( "GridView1 ");
var chkArr = grd.getElementsByTagName( "input ");
var chkAll;
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkAll ") > -1) {
chkAll = chkArr[i];
break;
}
}
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkItem ") > -1 &&
!chkArr[i].checked) {
chkAll.checked = false;
return;
}
}
chkAll.checked = true;
}
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div>
<asp:GridView ID= "GridView1 " runat= "server " AutoGenerateColumns= "false ">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID= "chkAll " onclick= 'chkAll(this) ' runat= "server " />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID= "chkItem " onclick= 'chkItem() ' runat= "server " />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText= "ProductName ">
<ItemTemplate>
<%# Eval( "ProductName ") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField= "UnitPrice " HeaderText= "UnitPrice " />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
