在行选择中检查gridview内的复选框(check a checkbox inside the gridview on row select)

在行选择中检查gridview内的复选框(check a checkbox inside the gridview on row select)

我有这个代码检查行单击复选框，但问题是我不能点击复选框本身。

$(document).ready(function () { //$("#<%=grdRP.ClientID %> td").click(function () { $('body').on('click', 'tr.dataRow', function () { selectRow($(this).closest("tr")); }); }); function selectRow(row) { var firstInput = row[0].getElementsByTagName('input')[0]; firstInput.checked = !firstInput.checked; }

这是gridview的html代码。

<asp:GridView ID="grdLocation" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" DataSourceID="SqlDataSource2" ForeColor="Black" GridLines="Vertical" Width="420px" ShowHeaderWhenEmpty="True" EmptyDataText="No records Found" OnRowDataBound="grdLocation_RowDataBound" > <AlternatingRowStyle BackColor="White" /> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="chkLocSelected" runat="server"/> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="Location Num" HeaderText="Location Num" SortExpression="Location Num" /> <asp:BoundField DataField="Location Name" HeaderText="Location Name" SortExpression="Location Name" /> <asp:BoundField DataField="Loc Group" HeaderText="Loc Group" SortExpression="Loc Group" /> </Columns> <FooterStyle BackColor="#CCCC99" /> <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" /> <RowStyle BackColor="#F7F7DE" /> <SelectedRowStyle BackColor="#90FF90" Font-Bold="True" ForeColor="Black" /> <SortedAscendingCellStyle BackColor="#FBFBF2" /> <SortedAscendingHeaderStyle BackColor="#848384" /> <SortedDescendingCellStyle BackColor="#EAEAD3" /> <SortedDescendingHeaderStyle BackColor="#575357" /> </asp:GridView>

I have this code that checks the checkbox on row click but the problem is i cant click on the checkbox itself.

$(document).ready(function () { //$("#<%=grdRP.ClientID %> td").click(function () { $('body').on('click', 'tr.dataRow', function () { selectRow($(this).closest("tr")); }); }); function selectRow(row) { var firstInput = row[0].getElementsByTagName('input')[0]; firstInput.checked = !firstInput.checked; }

here's the html code for the gridview.

<asp:GridView ID="grdLocation" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" DataSourceID="SqlDataSource2" ForeColor="Black" GridLines="Vertical" Width="420px" ShowHeaderWhenEmpty="True" EmptyDataText="No records Found" OnRowDataBound="grdLocation_RowDataBound" > <AlternatingRowStyle BackColor="White" /> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="chkLocSelected" runat="server"/> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="Location Num" HeaderText="Location Num" SortExpression="Location Num" /> <asp:BoundField DataField="Location Name" HeaderText="Location Name" SortExpression="Location Name" /> <asp:BoundField DataField="Loc Group" HeaderText="Loc Group" SortExpression="Loc Group" /> </Columns> <FooterStyle BackColor="#CCCC99" /> <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" /> <RowStyle BackColor="#F7F7DE" /> <SelectedRowStyle BackColor="#90FF90" Font-Bold="True" ForeColor="Black" /> <SortedAscendingCellStyle BackColor="#FBFBF2" /> <SortedAscendingHeaderStyle BackColor="#848384" /> <SortedDescendingCellStyle BackColor="#EAEAD3" /> <SortedDescendingHeaderStyle BackColor="#575357" /> </asp:GridView>

最满意答案

当您点击复选框时，您会触发两个change事件。 这基本上意味着它会立即检查并取消选中，而您看不到任何更改。 为防止这种情况，请确保在单击复选框时不会触发您的功能。

你可以匹配你的元素与event.target 。 在这种情况下，我假设匹配tagName就足够了

$('body').on('click', 'tr.dataRow', function (e) { if(e.target.tagName != 'INPUT') { selectRow($(this).closest("tr")); } });

或者，您可以尝试event.preventDefault()

$('.dataRow input').on('click', function(e){ e.preventDefault(); })

When you click the checkbox you fire two change events. Which basically means it checks and unchecks instantly and you don't see any change. To prevent this make sure your function doesn't fire when you click on the checkbox.

You can match your element against event.target. In this case i'm assuming matching tagName would be enough

$('body').on('click', 'tr.dataRow', function (e) { if(e.target.tagName != 'INPUT') { selectRow($(this).closest("tr")); } });

Alternatively you can try event.preventDefault()

$('.dataRow input').on('click', function(e){ e.preventDefault(); })