使用空格键检查复选框并聚焦到下一个复选框

Question

我在网格视图的模板字段中有一列复选框。因为它有时可以有很多行，而且还需要检查所有复选框。所以一直用鼠标点击真的很麻烦。

然后，有人告诉我空格键也可以做同样的工作，只是它一次只能选中/取消选中 1。因此，您需要按 Tab 键来关注下一个复选框。所以我在想是否有办法能够选中/取消选中，只用空格键关注下一个复选框？

Answer 1

如果您从 CheckBoxField 更改为在网格中使用模板列？

然后制表符+空格键将起作用。事实上，tab 键不仅可以工作（tab 到下一个），而且如果你在一行上有 3 个复选框，然后单击第一个复选框。现在您可以点击标签，然后点击空格键 - 它会切换复选框。您可以再次按 Tab，现在空格键会选中/取消选中下一个复选框。

更好的是，你到达了那一排网格的尽头？然后 tab 移动到下一个网格行。你的光标会跳转到第一个非绑定字段。

所以，假设我有这个标记：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CssClass="table table-hover">
  <Columns>
    <asp:BoundField DataField="FirstName" HeaderText="FirstName"    />
    <asp:BoundField DataField="LastName" HeaderText="LastName"      />
    <asp:BoundField DataField="HotelName" HeaderText="HotelName"    />
    <asp:BoundField DataField="City" HeaderText="City"              />
    <asp:BoundField DataField="Province" HeaderText="Province"      />
    <asp:CheckBoxField DataField="Active" HeaderText="Active"       />

    <asp:TemplateField HeaderText="Has Baggage" ItemStyle-HorizontalAlign="Center">
       <ItemTemplate>
         <asp:CheckBox ID="Baggage" Checked='<%# Eval("HasBAggage") %>' runat="server" />
       </ItemTemplate>
     </asp:TemplateField>

     <asp:TemplateField HeaderText="Smoking" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
          <asp:CheckBox ID="Smoking" Checked='<%# Eval("Smoking") %>' runat="server" />
        </ItemTemplate>
      </asp:TemplateField>

      <asp:TemplateField HeaderText="Balcony" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
           <asp:CheckBox ID="Balcony" Checked='<%# Eval("Balcony") %>' runat="server" />
        </ItemTemplate>
      </asp:TemplateField>
   </Columns>
</asp:GridView>

因此，所有列都是绑定字段，但最后 3 列是模板控件（标准 asp.net 复选框）

要填写的代码如下：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub


Sub LoadGrid()

    Using cmdSQL As New SqlCommand("SELECT * from tblHotels ORDER BY HotelName",
                    New SqlConnection(My.Settings.TEST4))

        cmdSQL.Connection.Open()
        GridView1.DataSource = cmdSQL.ExecuteReader
        GridView1.DataBind()

    End Using

End Sub

输出：

所以，在上面，如果我只是点击标签，我将在第一行。点击空格键将选中第一个框（有行李）。你现在在吸烟 - 你可以点击空格键，或点击标签（你现在在阳台上）。如果你再次点击 tab，你会移动到下一行，因为模板中的第一个标准控件是复选框，所以你就在下一行。

这里不需要额外的代码 - 它的工作原理是开箱即用，您无需任何代码。唯一的技巧是使用标准的 asp.net 控件（在模板字段内），而不是使用绑定字段（或绑定复选框）。