Question

我试图让我在GridView中的复选框更容易检查用户。我添加了一些jQuery来使<td>元素可单击并选中复选框。那部分有效。问题是，当用户点击实际的复选框时，它不会检查。当我调试我的代码时，似乎.is（＆＃34;：checked＆＃34;）没有正确返回。任何帮助将不胜感激。

我的GridView ItemTemplate

  <asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%"
         ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" >
     <ItemTemplate>
       <asp:CheckBox id="chkBxPSelect" runat="server" />
     </ItemTemplate>
  </asp:TemplateField>

我也尝试将复选框包装在标签中，也是一个锚标签也无济于事。

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%"  ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" >
    <ItemTemplate> 
        <label style="display:block;">
           <asp:CheckBox ID="chkBxPSelect" runat="server" /> 
        </label>                                                                                                                                             
    </ItemTemplate>

我的jQuery

$(".chk").click(function (e)
{
    var checkBox = $(this).find("input:checkbox:first");

    if (checkBox.is(":checked"))
    {
        checkBox.prop("checked", false);
    }
    else
    {
        checkBox.prop("checked", true);
    }
});

有什么想法吗？

修改我也试过在复选框本身添加一个点击。似乎总是检查是否使用`.is（＆＃34;：checked＆＃34;）检查复选框是否报告复选框的正确状态。

$('input[id$="chkBxPSelect"]').click(function ()
{
   if ($(this).is(":checked"))
   {
      $(this).prop("checked", false);
   }
   else
   {
    $(this).prop("checked", true);
   }

}）;

和我在下面尝试过这个建议。

$('input[id$="chkBxPSelect"]').click(function ()
{
  e.preventDefault();
    //e.stopPropagation();

});

然后单击实际复选框时仍然无法检查复选框。

Answer 1

更新：您可以通过以下方式完成任务：

<td class="Validate">
     <asp:Checkbox id="chkSelect" runat="server" class="chkSelect" ... />
</td>

通过添加class元素，它将为jQuery提供一些锚点。然后你可以这样做：

$('.Validate').click(function () {
     var item = $(this).find('.chkSelect');
     if(item.is(':checked') {
         item.prop('checked', false);
     } else {
         item.prop('checked', true);
     }
});

因此，当您点击td jQuery将执行时，就像查找输入一样，您为它提供了一个类ID标识符，它反映了您的Id。因此，您使用find搜索td element中的子元素。这应该找到您的输入，然后您只需使用标识该复选框的var进行检查。

您实质上可以执行以下操作，这将确保您获得控制权。

$('#<%= chkBxPSelect.ClientID %>').click(function () {
     if($(this).is(':checked')) {
         $(this).prop('checked', false);
     } else {
         $(this).prop('checked', true);
     }
});

如果$(this)无效，请使用上述完整标识符，但Microsoft评估应解决您的问题。您在JavaScript中的另一种方法是：

$(this).find('input[type="checkbox"]:first');

我相信也应该这样做。您可能想测试它，但我会使用Web表单的第一种方法。

Answer 2

这可能有效：

$(".chk").click(function (e)
{
    var checkBox = $(this).find("input:checkbox:first");
    if (checkBox.is(":checked"))
    {
        checkBox.prop("checked", false);
    }
    else
    {
        checkBox.prop("checked", true);
    }
});

$(".chk input[type=checkbox]:first").click(function (e)
{
    e.preventDefault();
    e.stopPropagation();
});

我不确定您是否需要preventDefault或stopPropagation，但我认为stopPropagation阻止复选框click冒泡到其父td }}

另一种可能的解决方案就是这样。如果它有效，我会推荐它，因为它不需要任何脚本：

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%"
        ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" >
    <ItemTemplate>
        <label style="display:block;">
            <asp:CheckBox id="chkBxPSelect" runat="server" />
        </label>
    </ItemTemplate>
</asp:TemplateField>

当复选框包含在<label>元素内时，单击该标签内的任何内容都会切换复选框的已选中状态。通过给标签一个display：block样式，这个应该使它占据它所在的表格单元格（td）的整个空间。因此，点击td中的任何位置都应该在威胁中切换复选框。

Answer 3

我在@danludwig的帮助下想到了这一点。我需要在复选框本身和e.stopPropagation（）中添加一个单击处理程序，以防止事件冒泡到td。我还必须将复选框包装在label标签中，并在复选框中添加一个CssClass，以便更容易地选择它。

我的新复选框。

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%"
        ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk">
    <ItemTemplate>
        <label style="display:block;">
            <asp:CheckBox ID="chkBxPSelect" runat="server" CssClass="chkBox" />
        </label>
    </ItemTemplate>
</asp:TemplateField>

我的新jQuery方法：

$(".chk").click(function (e)
{

    var checkBox = $(this).children("input:checkbox:first");


    if (checkBox.is(":checked"))
    {
        checkBox.prop("checked", false);
    }
    else
    {
        checkBox.prop("checked", true);
    }    

});



$(".chkBox").click(function (e)
{
    e.stopPropagation();

    if ($(this).is(":checked"))
    {
        $(this).prop("checked", false);
    }
    else
    {
        $(this).prop("checked", true);
    }

});

Answer 4

我只是在样式中使用了z-index并为我工作：

<input type="checkbox" class="custom-control-input" id="txtNews" runat="server" style="z-index:9999;">

ASP.NET Checkbox不会检查jQuery

4 个答案: