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

Question

我正在尝试设置一个复选框，该复选框将打开/关闭 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>

Answer 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>