javascript 从按钮客户端选择gridview中的所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15273988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select all checkboxes in gridview from button client side
提问by Camilla
I have a gridview with rows containing a checkbox. Below the gridview I have a button. When I click it I want to select all the checkboxes from client side. So far I've read about OnClientClick, javascript and so on.. but my code doesn't work. Can someone help me out please?
我有一个包含复选框的行的网格视图。在 gridview 下面我有一个按钮。当我单击它时，我想从客户端选择所有复选框。到目前为止，我已经阅读了有关 OnClientClick、javascript 等的内容......但我的代码不起作用。有人可以帮我吗？
note: I don't wanna select the checkboxes selecting the checkbox in the header (I found a lot of examples about this), but clicking a button outside the gridview
注意：我不想选择复选框选择标题中的复选框（我发现了很多关于此的示例），而是单击 gridview 外的按钮
<asp:GridView runat="server" ID="MyGridView" EnableViewState="true"
AutoGenerateColumns="False"
><AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Select" SortExpression="Select" ItemStyle-HorizontalAlign="Center" >
<EditItemTemplate>
<asp:CheckBox ID="CkBoxSelectET" runat="server" /></EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CkBoxSelectIT" runat="server" /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" SortExpression="Name" ItemStyle-HorizontalAlign="Center" Visible="false" >
<ItemTemplate>
<asp:Label ID="name" runat="server" Text='<%# Bind("Name") %>' Visible="false" /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City" SortExpression="City" ItemStyle-HorizontalAlign="Left" >
<ItemTemplate>
<asp:Label ID="lblCity" runat="server" /></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button runat="server" ID="btnSelect" Text="Select all" BackColor="LightGray" OnClientClick="SelectAll(id);" />
<script type="text/javascript">
var gridViewControl = document.getElementById('<%= MyGridView.ClientID %>');
function SelectAll(id) {
for (i = 0; i < gridViewControl.elements.length; i++) {
if (gridViewControl.elements[i].type == "checkbox") {
gridViewControl.elements[i].checked = document.getElementById(id).checked;
}
}
}
in c#, when i bind the data:
在 C# 中，当我绑定数据时：
btnSelect.Attributes.Add("OnClientClick", "javascript:SelectAll('" + btnSelect.ClientID + "')");
回答by Ann L.
You seem to be saying "If my button is 'checked' (that being the element corresponding to the ID you're passing in) then check this checkbox". Since a button can't be checked, that's not going to work.
您似乎在说“如果我的按钮被‘选中’（即与您传入的 ID 对应的元素），则选中此复选框”。由于无法检查按钮，因此无法正常工作。
You're also saying "On clicking this button, call this Javascript and pass in the value of the variable id." But idisn't defined in that context.
您还说“单击此按钮时，调用此 Javascript 并传入变量的值id。” 但id没有在该上下文中定义。
If all you want is to select all checkboxes, and don't want to toggle between all/none checked, this code should work:
如果您只想选择所有复选框，并且不想在全部/未选中之间切换，则此代码应该有效：
HTML:
HTML：
<button id="btnSelect" type="button" onclick="SelectAll" >Select All</button>
In javascript:
在 JavaScript 中：
var gridViewControl = document.getElementById('<%= MyGridView.ClientID %>');
function SelectAll() {
for (i = 0; i < gridViewControl.elements.length; i++) {
if (gridViewControl.elements[i].type == "checkbox") {
gridViewControl.elements[i].checked = true;
}
}
}
}
You shouldn't need c# code at all.
您根本不需要 C# 代码。
回答by Floremin
I'd suggest doing this completely client side using jQuery. I'm assuming new ASP.NET would render IDs for elements the way you named them, so I will use those. (I think there is a setting in ASP.NET to render IDs this way)
我建议使用 jQuery 完全在客户端执行此操作。我假设新的 ASP.NET 会按照您命名元素的方式呈现元素的 ID，因此我将使用它们。（我认为 ASP.NET 中有一个设置以这种方式呈现 ID）
Here some sample code that you can put on the bottom of your HTML code, after including jQuery:
下面是一些示例代码，您可以在包含 jQuery 之后将其放在 HTML 代码的底部：
<script>
$("#btnSelect").click(function(event) {
event.preventDefault();
$("#MyGridView").find("[type='checkbox']").prop('checked', true);
});
</script>
This will select and check only the checkboxes within the GridView, assuming the rendered ID for the GridView container element is "MyGridView".
这将仅选择并选中 GridView 中的复选框，假设 GridView 容器元素的呈现 ID 是“MyGridView”。
回答by Camilla
Finally I found the solution, and it works. I modified slightly the solution of @Ann L.
最后我找到了解决方案，并且有效。我稍微修改了@Ann L 的解决方案。
function SelectAll() {
var frm = document.forms['aspnetForm'];
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('CkBoxSelectIT') != -1) {
document.forms[0].elements[i].checked = true
}
}
}
回答by Ashi
I have done like this,Find input elements inside grid by using getElementsByTagName("input"). Then iterating and setting the value to checked.
我已经这样做了，使用 .Find 在网格内查找输入元素getElementsByTagName("input")。然后迭代并将值设置为已检查。
HTML
HTML
<asp:CheckBox ID="chkSelectAll" runat="server" onclick="selectAll(this)" />
Javascript
Javascript
function selectAll(chkAll) {
var gvrecipe = document.getElementById('<%=gvrecipe.ClientID %>');
var inputs = gvrecipe.getElementsByTagName("input");
alert(inputs.length);
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].id.indexOf("_chkSelect") != -1)
inputs[i].checked = chkAll.checked;
}
}
