带有 CSS 类名的 <span> 内复选框的 jQuery 选择器

Posted 2023-03-05

【中文标题】带有 CSS 类名的 <span> 内复选框的 jQuery 选择器

【英文标题】：jQuery selector for checkbox inside <span> with CSS class name

【发布时间】：2018-06-27 19:02:00

【问题描述】：

我正在尝试设置一个复选框，该复选框将打开/关闭 ASP.NET GridView 中的所有复选框。我希望在客户端完成所有这些工作。无需回发。我想我可以使用 jQuery，因为它已经包含在项目中（jQuery v1.11）。

我以为我会为复选框分配一个独特的样式，并使用 jQuery 通过 css 类选择复选框，但事实证明 ASP.NET 正在渲染跨度内的复选框元素并将唯一的 CSS 样式分配给<span> 而不是复选框元素本身。

<span class="MyUniqueStyleName">
  <input type="checkbox" .... >
</span>

什么样的 jQuery 选择器用于访问实际的复选框？我尝试了以下没有任何运气。

$('span.MyUniqueStyleName input')

这是我用来切换所有复选框的 jQuery。它位于 GridView 之后。 toggle 复选框具有 chkToggleAll 类。

  <script>
    $(document).ready(function () 
      $('input.chkToggleAll').click(function () 
        $('span.MyUniqueStyleName input').each(function () 
          $(this).attr('checked', $('input.chkToggleAll').attr('checked'));
        );
      );
    );
  </script>

【问题讨论】：

您的选择器似乎没问题：jsfiddle.net/jLsx0y58/1。您是否有机会在 html 呈现之前运行它？请注意 $(function() 回调函数包裹在 JSFiddle 中的代码周围 - 它是“document.ready”的缩写形式，可确保代码在页面完全呈现并且目标 HTML 实际存在于 DOM 之前不会运行。

我已经在 GridView 渲染之后放置了脚本本身。我已经用我正在使用的脚本更新了这个问题。

input.chkToggleAll 应该是 span.chkToggleAll 就像它在代码后面一样。我认为这只是一个错字。

@ADyson - 主切换复选框不是从 ASP.NET 控件呈现的，因此它只是一个标准的复选框元素 <input type="checkbox" class="chkToggleAll">

在这种情况下，这只是相反的问题，确定吗？上面sn-p中的$('span.chkToggleAll input')应该是$('input.chkToggleAll')?

【参考方案1】：

除了几个小问题，你几乎就在那里。此版本更正了一些问题，并使代码更加高效。

主要需要注意的是

1) 使用 .prop() 代替 .attr()。这是至关重要的，也是您的代码不起作用的主要原因。查看http://api.jquery.com/prop/ 的 jquery 文档，了解为什么这是正确的使用方法。

2）处理复选框上的“更改”而不是“点击”事件（主要是按照惯例，点击也可以）

3) 您不需要 .each 循环，因为当使用 .prop（或 .attr ）时，它会自动将更改应用于所有选定的元素 - 这在文档中有所说明。

$(document).ready(function() 
  $('.chkToggleAll').change(function() 
    var checked = $('.chkToggleAll').prop('checked');
    $('span.MyUniqueStyleName input[type="checkbox"]').prop("checked", checked);
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="chkToggleAll" />Toggle All
<span class="MyUniqueStyleName">
  <input type="checkbox" id="cbox1"/>1
</span>
<span class="MyUniqueStyleName">
  <input type="checkbox" id="cbox2"/>2
</span>
<span class="MyUniqueStyleName">
  <input type="checkbox" id="cbox3"/>3
</span>
<span class="MyUniqueStyleName">
  <input type="checkbox" id="cbox4"/>4
</span>

【讨论】：

优秀且解释清楚的答案！感谢props 与attr 上的信息和链接。此外，解释为什么不需要循环。一个问题.. 为什么在.prop("checked", checked); 中使用双引号而不是单引号？我仍然对何时在 javascript 中使用双引号 " 以及何时使用单引号 ' 感到困惑。

@webworm 没问题。引号在很大程度上是可以互换的。如果您想在字符串中包含相反的内容，偶尔使用一个或另一个会很有用。例如如果您写一个字符串var message = "I'm happy today"，由于撇号，您将无法将其放在单引号中。同样，如果您写了var message = 'ADyson is "happy" today'，它在双引号中也不起作用。如果没有这样的问题，您选择哪个并不重要。

@webworm 事实上，回顾这个​​问题，CSS 选择器span.MyUniqueStyleName input[type="checkbox"]' 是这种可互换性何时有用的完美示例。如果所有 JS 字符串都必须用双引号括起来，比如在 C# 中，那么你会很不愉快地在所有地方都使用反斜杠来转义字符串中的引号字符。