Question

我正在尝试设置一个复选框，用于打开/关闭ASP.NET GridView中的所有复选框。我希望做所有这个客户端。不需要PostBack。我想我可以使用jQuery，因为它已经包含在项目中（jQuery v1.11）。

我以为我会为复选框分配一个独特的样式，并使用jQuery通过css类选择复选框但是事实证明ASP.NET正在渲染span中的checkbox元素并将唯一的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>

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

1 个答案: