jQuery <span> 内复选框的选择器，名称为 CSS class

Question

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

我想我会为复选框分配一个独特的样式，并通过 css class 使用 jQuery 到 select 复选框，但结果是 ASP.NET 在 span 内呈现复选框元素，并将唯一的 CSS 样式分配给 <span> 而不是复选框元素本身。

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

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

$('span.MyUniqueStyleName input')

这是我用来切换所有复选框的 jQuery。它紧跟在 GridView 之后。切换复选框有 class chkToggleAll.

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

Answer 1

除了一些小问题，你几乎已经完成了。此版本更正了一些问题并使代码稍微更高效。

主要需要注意的是

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

2) 处理复选框上的 "change" 而不是 "click" 事件（这主要是按照惯例，点击也可以）

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>

jQuery <span> 内复选框的选择器，名称为 CSS class

jQuery selector for checkbox inside <span> with CSS class name

asp.net

jquery

jquery-selectors