Javascript Asp.net多个GridView,标题模板中的复选框全部选择/全部取消选择功能
我在我的aspx页面中使用了两个gridview控件。我在两个控件中都有一列复选框。我通过在两个GridView的标题模板中提供一个复选框并使用java脚本函数,方便用户选择/取消选择两个GridView中的所有复选框。下面是代码Javascript Asp.net多个GridView,标题模板中的复选框全部选择/全部取消选择功能,javascript,asp.net,c#-4.0,Javascript,Asp.net,C# 4.0,我在我的aspx页面中使用了两个gridview控件。我在两个控件中都有一列复选框。我通过在两个GridView的标题模板中提供一个复选框并使用java脚本函数,方便用户选择/取消选择两个GridView中的所有复选框。下面是代码 <script type="text/javascript"> function UncheckParent(obj) { var isUnchecked = obj.checked; if (isUnchecked
<script type="text/javascript">
function UncheckParent(obj) {
var isUnchecked = obj.checked;
if (isUnchecked == false) {
var frm = document.forms[0];
for (i = 0; i < frm.length; i++) {
if (frm.elements[i].id.indexOf('chkSelectAllCheckboxes') != -1) {
frm.elements[i].checked = false;
}
}
}
}
function CheckAll(obj) {
var row = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
var inputs = row.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
inputs[i].checked = obj.checked;
}
}
}
</script>
但问题是,一旦我选中或取消选中其中一个复选框,两个GridView中的所有复选框都会被选中。我还可以举一个简短的例子说明正在发生的事情。两个GridView GDVW学生和GDVW教师。两者都有复选框列和标题模板中的复选框。使用上面的代码,当我单击GDVWStudens的header复选框时,GDVStudens和gdvTeachers中的所有复选框都被选中。请你做错了。您应该在单击标题的特定网格内获得复选框;相反,您将获得表单上创建的所有复选框!这是非常低效的,并且解释了为什么无论单击哪个标题,都会检查/取消检查所有内容 如果您可以使用jQuery,您应该能够将这些函数重写为如下内容:
function checkAll(gridID,checkbox) {
$("#"+gridID+" input:checkbox").attr("checked",checkbox.checked);
}
请参阅以获取一个快速示例。按照下面的说明添加javascript函数
<script type="text/javascript">
function SelectAll(id, grd) {
//get reference of GridView control
var grid = null;
if (grd = "1") {
grid = document.getElementById("<%= GridView1.ClientID %>");
}
else {
grid = document.getElementById("<%= GridView2.ClientID %>");
}
//variable to contain the cell of the grid
var cell;
if (grid.rows.length > 0) {
//loop starts from 1. rows[0] points to the header.
for (i = 1; i < grid.rows.length; i++) {
//get the reference of first column
cell = grid.rows[i].cells[0];
//loop according to the number of childNodes in the cell
for (j = 0; j < cell.childNodes.length; j++) {
//if childNode type is CheckBox
if (cell.childNodes[j].type == "checkbox") {
//assign the status of the Select All checkbox to the cell checkbox within the grid
cell.childNodes[j].checked = document.getElementById(id).checked;
}
}
}
}
}
</script>
我就是这样管理的:
function UnCheckAllContainer(obj) {
var isUnchecked = obj.checked;
if (isUnchecked == false) {
var frm = document.forms[0];
for (i = 0; i < frm.length; i++) {
if (frm.elements[i].id.indexOf('chkSelectAllCheckboxesContainers') != -1
) {
frm.elements[i].checked = false;
}
}
}
}
function CheckAllContainer(chk) {
$('#<%=gdvwContainers.ClientID %>').find("input:checkbox").each(function () {
if (this != chk) {
this.checked = chk.checked;
}
});
}
function UnCheckAllContainer(obj) {
var isUnchecked = obj.checked;
if (isUnchecked == false) {
var frm = document.forms[0];
for (i = 0; i < frm.length; i++) {
if (frm.elements[i].id.indexOf('chkSelectAllCheckboxesContainers') != -1
) {
frm.elements[i].checked = false;
}
}
}
}
function CheckAllContainer(chk) {
$('#<%=gdvwContainers.ClientID %>').find("input:checkbox").each(function () {
if (this != chk) {
this.checked = chk.checked;
}
});
}