javascript - jquery 检查所有输入 :checkbox on button click

Question

谁能写出如何在 jquery 中点击按钮时实现 select/deselect 功能？

<ul style="list-style:none">
    <li>
        <label><input class="checkhour" type="checkbox"> One</label>
    </li>
    <li>
        <label><input class="checkhour" type="checkbox"> Two</label>
    </li>
    <li>
        <label><input class="checkhour" type="checkbox"> Three</label>
    </li>
    <li><button type="button" class="checkall">select/deselect</button></li>
</ul>

我尝试了几种方法，但没有一种方法行得通。

Answer 1

您可以通过分配一个全局变量来检查先前的条件:

var clicked = false;
$(".checkall").on("click", function() {
  $(".checkhour").prop("checked", !clicked);
  clicked = !clicked;
  this.innerHTML = clicked ? 'Deselect' : 'Select';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="list-style:none">
  <li>
    <label>
      <input class="checkhour" type="checkbox">One</label>
    <label>
      <input class="checkhour" type="checkbox">Two</label>
    <label>
      <input class="checkhour" type="checkbox">Three</label>
  </li>
  <li>
    <button type="button" class="checkall">Select</button>
  </li>
</ul>