Question

我有这个代码检查行点击的复选框，但问题是我无法点击复选框本身。

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

Answer 1

我对你想要完成的事情感到有点困惑。那么，在点击要选择行的行并选中复选框时，还希望能够选择/取消选中该复选框吗？

Answer 2

单击该复选框可触发两个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();
})

选中行选择中gridview内的复选框

2 个答案: