jquery check all input:checkbox on button click

Question

Can anyone write how to make the select/deselect function on the button click in jquery?

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

I try doing this in a couple of ways but none of them want to work.

Answer 1

You can check previous condition by assign a global variable:

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>

Answer 2

var state = false; // desecelted

$('.checkall').click(function () {

    $('.checkhour').each(function() {
        if(!state) {
            this.checked = true;
        } else {
            this.checked = false;
        }
    });

    //switch
    if (state) {
        state = false;   
    } else {
        state = true;
    }

});

and jsfiddle for you http://jsfiddle.net/0jazurdu/