Question

我有一个名为Select All的复选框。单击此选项后，我的Gridview中的所有其他复选框都已选中。但我希望当网格中任何一个复选框都未被选中时，这个Select All Checkbox将自动取消选中。有没有人可以帮我解决这个问题？

谢谢。

Answer 1

function SelectheaderCheckboxes(headerchk) {
debugger
var gvcheck = document.getElementById('gvdetails');
var i;
//Condition to check header checkbox selected or not if that is true checked all checkboxes
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = true;
}
}
//if condition fails uncheck all checkboxes in gridview
else {
for (i = 0; i < gvcheck.rows.length; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
}
}

<asp:GridView ID="gvdetails" runat="server" DataSourceID="dsdetails" onrowdatabound="gvdetails_RowDataBound" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkheader" runat="server" onclick="javascript:SelectheaderCheckboxes(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkchild" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Answer 2

您可以在客户端或服务器端执行此操作

客户端使用javascript / jquery

由于复选框是动态添加的，因此您需要使用on方法将复选框绑定到函数，并在状态发生变化时触发它。

$(document).ready(function() {
    $(".checkbox").on("change", function() {
         if(!$(this).is(":checked")){
             $(".selectAll").prop('checked', false);
         }
    });
});

这是一个jsFiddle，功能齐全，选择All：

全选/取消全选
取消勾选其中一个复选框时选择全部
勾选所有复选框时勾选全部

服务器端

当取消选中复选框并循环显示所有复选框并取消勾选时，在回发（ajax）上使用事件处理程序

Font-end使用ajax进行部分回发以更新gridview。 select all复选框和gridview复选框将触发回发。

<asp:UpdatePanel  runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvCheckBoxes" runat="server">
            <Columns>
                <asp:TemplateField >
                    <ItemTemplate>
                        <asp:CheckBox ID="cbCheckBox" OnCheckedChanged="CheckBoxChanged" AutoPostBack="true" runat="server" />
                    </ItemTemplate>
                    /asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="cbSelectAll"/>
    </Triggers> 
</asp:UpdatePanel>

背后的代码

select All复选框事件处理程序遍历gridview并找到复选框。如果勾选了全选复选框，则会勾选它们，否则它会取消它们

gridview复选框事件处理程序遍历复选框并设置一个标志以确定是否应勾选或取消选中全选复选框。如果没有选中任何复选框，则它存在循环，因此选择all也必须取消选中

public void SelectAll (Object sender, Eventargs e)
{
    foreach (var row in grid.Rows)
    {
        var checkBox = (CheckBox)row.FindControl("cbCheckBox");
        checkBox.Checked = cbSelectAll.Checked;          
    }
}

public void CheckBoxChanged(Object sender, Eventargs e)
{
    var isSelectAll = true;

    foreach (var row in grid.Rows)
    {
        var checkBox = (CheckBox)row.FindControl("cbCheckBox");

        if(!checkBox.Checked)
        {
            isSelectAll = false;
            break;
        }
    }

    cbSelectAll.Checked = isSelectAll;          
}

Answer 3

我能想到的最佳方法是将GridView的CheckBoxField转换为TemplateField。然后将asp:CheckBox中的新TemplateField与CheckedChanged事件相关联。在您的代码隐藏中，您处理CheckedChanged事件，然后当任何复选框更改为未选中时，您可以切换“全部选中”复选框。

Answer 4

看看这段代码。希望这会对你有所帮助

<div>
<asp:CheckBox ID="chkSelectAll" runat="server" />
    <asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:TemplateField HeaderText="Select">
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server" oncheckedchanged="chkSelect_CheckedChanged" AutoPostBack="true" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

protected void chkSelect_CheckedChanged(object sender, EventArgs e)
    {
        bool isFound = false;
            foreach (GridViewRow gvr in GridView1.Rows)
            {
                CheckBox chkSelect = gvr.FindControl("chkSelect") as CheckBox;
                if (chkSelect.Checked == false)
                {
                    isFound = true;
                    break;
                }

            }

            if (isFound)
            {
                chkSelectAll.Checked = false;
            }
            else
            {
                chkSelectAll.Checked = true;

            }
    }

Answer 5

以下代码应该有效。我测试了它。

<强>使用Javascript：

<script type="text/javascript">
        function OnOneCheckboxSelected(chkB) {
            var IsChecked = chkB.checked;
            var Parent = document.getElementById('gridFileList');
            var cbxAll;
            var items = Parent.getElementsByTagName('input');
            var bAllChecked = true; 
            for (i = 0; i < items.length; i++) {
                if(items[i].id.indexOf('cbxSelectAll') != -1){
                    cbxAll = items[i];
                    continue;
                }
                if (items[i].type == "checkbox" && items[i].checked == false) {
                    bAllChecked = false;
                    break;
                }
            }
            cbxAll.checked = bAllChecked;
        }

        function SelectAllCheckboxes(spanChk) {
            var IsChecked = spanChk.checked;
            var cbxAll = spanChk;
            var Parent = document.getElementById('gridFileList');
            var items = Parent.getElementsByTagName('input');
            for (i = 0; i < items.length; i++) {
                if (items[i].id != cbxAll.id && items[i].type == "checkbox") {
                    items[i].checked = IsChecked;
                }
            }
        }
    </script>

ASPX加价：

<asp:TemplateField HeaderText="Select">
   <HeaderTemplate>
      <asp:CheckBox ID="cbxSelectAll" OnClick="javascript:SelectAllCheckboxes(this);" runat="server" />
   </HeaderTemplate>
   <ItemTemplate>
      <asp:CheckBox OnClick="javascript:OnOneCheckboxSelected(this);" ID="cbxSelect" runat="server" />
   </ItemTemplate>
</asp:TemplateField>

Answer 6

上面的代码我修改了它，如果用户取消选中网格的子行。网格标题将自动取消选中。

    <script type="text/javascript">
    function UncheckHeader(headerchk) {
        var gvcheck = document.getElementById('gvdetails');
            var inputs = gvcheck.rows[0].getElementsByTagName('input');
            inputs[0].checked = false;
    }
    function SelectAll(headerchk) {
        var gvcheck = document.getElementById('gvdetails');
        var i;
      //  if true checked all checkboxes
        if (headerchk.checked) {
            for (i = 0; i < gvcheck.rows.length; i++) {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
                inputs[0].checked = true;
            }
        }
            //if condition fails uncheck all checkboxes in gridview
        else {
            for (i = 0; i < gvcheck.rows.length; i++) {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
                inputs[0].checked = false;
            }
        }
    }
</script>
<asp:GridView ID="gvdetails" runat="server" >
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="chkheader" runat="server" onclick="javascript:SelectAll(this)" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkchild"    runat="server" onclick="javascript:UncheckHeader(this)" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

更多详情here

如果取消选中一个复选框，如何取消选中全选复选框

6 个答案: