2

我有一个名为 Select All 的复选框。当我单击它时，我的 Gridview 中的所有其他复选框都被选中。但是我想当网格内的任何一个复选框都被取消选中时，这个全选复选框将自动取消选中。请问有没有人可以帮助我？

谢谢你。

4

6 回答 6

2 
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>
于 2013-06-25T16:22:40.583 回答
1

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

客户端使用 javascript/jquery

由于复选框是动态添加的，您将需要使用该on方法将复选框绑定到函数并在其状态更改时触发它。

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

这是一个具有完整功能的jsFiddle选择所有将：

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

服务器端

当取消选中复选框并循环遍历所有复选框并取消选中它们时，使用事件处理程序进行回发（ajax）

Font-end 使用 ajax 进行部分回发以更新 gridview。全选复选框和 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>

代码背后

全选复选框事件处理程序循环通过 gridview 并找到复选框。如果勾选了全选复选框，它会勾选它们，否则它会取消勾选它们

gridview 复选框事件处理程序循环通过复选框并设置一个标志以确定它是否应该勾选或取消勾选全选复选框。如果未勾选任何复选框，则存在循环，因为全选因此也必须取消勾选

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;          
}
于 2013-06-25T16:20:28.827 回答
0

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

于 2013-06-25T16:22:10.420 回答
0

以下代码应该可以工作。我测试了它。

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>
于 2013-09-22T06:30:35.637 回答
0

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

<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;

            }
    }
于 2013-06-25T16:37:46.123 回答
-1

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

    <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>

更多细节在这里

于 2016-06-01T15:53:49.500 回答