Question

以下代码

((CheckBox)e.Row.FindControl("exportCb")).CssClass = "enabledExport";

创建html

<span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_gridviewName__ctl2_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:gridviewName:_ctl2:exportCb" /></span>

对于asp.net gridview列

<asp:TemplateField HeaderText="Export">
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="exportCb"/>        
                        </ItemTemplate>
                        <ItemStyle/>
                    </asp:TemplateField>

我需要使用jquery

$('.enabledExport').toggle()

选中/取消选中（作为切换）复选框。由于CssClass上标有<span>，因此代码会尝试切换<span>而不是<input>。我怎样才能解决这个问题？

我不介意解决方案是否在jquery或asp.net端，只要它有效。我喜欢它，如果代码只是标记输入像它应该...

Answer 1

如果您尝试显示/隐藏复选框，则可以执行以下操作：

$('.enabledExport input:checkbox').toggle()

但我认为你要做的是：

var $checkbox = $('.enabledExport input:checkbox');
$checkbox.attr("checked", !$checkbox.is(":checked"));

Answer 2

最简单的解决方案是以这种方式设计jQuery选择器，它将选择位于span的子级为“enabledExport”的复选框。在这种情况下，它看起来像：

jQuery('.enabledCheckbox > :checkbox').toggle()

或

jQuery(':checkbox', '.enabledCheckbox').toggle()

Answer 3

您需要使用正确的cssclass并在其前面加上一个点。所以你选择了你的跨度。然后进入该范围并选中复选框。这是绑定click事件：

$(".enabledExport").click(function(){
  var box = $(this).children(":checkbox");
  box.is(":checked") ? box.removeAttr("checked") : box.attr("checked", "checked");
});

这是点击：

$(".enabledExport").click();

Answer 4

我正在使用MasterSite页面，因此复选框元素id将ContentPlaceHolder信息添加到复选框ID中。当页面加载时，我正在分配一个自定义属性来帮助查找元素（也可以使用foreach语句完成）。这是后面的自定义属性代码：

protected void Page_Load（object sender，EventArgs e）

{

  if (!IsPostBack)
   {
      chkTxa.Attributes.Add("clientID", "chkTxa");
      chkTxx.Attributes.Add("clientID", "chkTxx");
   }

}

我的两个复选框ID是：chkTxa和chkTxx。我将AutoPostBack设置为“False”，因为我希望客户端处理复选框切换。由于该复选框位于html表中，因此浏览器将复选框包装在标记中。这需要您做额外的工作才能找到复选框。 jQuery代码是这样的：

$（document）.ready（function（）{

    var chkTxa;
    var chkTxx;
    // dig into the <span> object to find the checkbox
    chkTxa = $("[clientID=chkTxa]").children(":checkbox");
    chkTxx = $("[clientID=chkTxx]").children(":checkbox");

    $(chkTxa).click(function () {
        if (!chkTxa.is(":checked")) {
            chkTxa.removeAttr("checked");
        }
        else {
            chkTxx.removeAttr("checked");
        }
    });

   $(chkTxx).click(function () {
        if (!chkTxx.is(":checked")) {
            chkTxx.removeAttr("checked");
        }
        else {
            chkTxa.removeAttr("checked");
        }
    });
});

希望有人觉得这很有用。

阿伦

Answer 5

$(".enabledExport+input").toggle()应该做到这一点。

ASP.NET - 设置CheckBox的CssClass

5 个答案: