ASP.NET 复选框不会检查 jQuery

Question

我正在尝试使 GridView 中的复选框更易于用户检查。我添加了一些 jQuery 以使 <td> 元素可点击并选中复选框。那部分有效。问题是，当用户单击实际的复选框时，它不会选中。当我调试我的代码时，似乎 .is(":checked") 没有正确返回。任何帮助将不胜感激。

我的 GridView 项目模板

  <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(":checked") 检查复选框是否被选中似乎总是不会报告复选框的正确状态。

$('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 将执行，至于查找您的输入，您为它提供了一个 class 标识符，该标识符反映了您的 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 样式，这个应该让它占据它所在的 table 单元格 (td) 的整个 space的。因此，点击 td 中的任意位置应该会切换复选框。

Answer 3

我在@danludwig 的帮助下解决了这个问题。我需要向复选框本身添加一个点击处理程序 AND 和 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 复选框不会检查 jQuery

ASP.NET Checkbox won't check with jQuery

c#

asp.net

checkbox

jquery