Jquery check all input: checkbox when button is clicked

Question

Can someone write how to make the select / deselect function when a button is clicked 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 am trying to do this in a couple of ways, but none of them want to work.

Answer 1

You can check the previous condition by assigning a global variable:

var clicked = false;
$(".checkall").on("click", function() {
  $(".checkhour").prop("checked", !clicked);
  clicked = !clicked;
});

<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/deselect</button>
  </li>
</ul>

Run codeHide result

Answer 2

you can get everything input checkboxwith getElementsByTagNameand use propertychecked = true

var isChecked = false;
function checkAll() {
    var checkboxes = document.getElementsByTagName('input');
     if (isChecked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
  isChecked = !isChecked;
 }

<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" onClick="checkAll()">select/deselect</button></li>
</ul>

Run codeHide result

Answer 3

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

});

jsfiddle http://jsfiddle.net/0jazurdu/

Answer 4

, jquery html script

<ul style="list-style:none">
<li>
    <label><input class="checkhour" name="checkme[]" type="checkbox"> One</label>
    <label><input class="checkhour" name="checkme[]" type="checkbox"> Two</label>
    <label><input class="checkhour" name="checkme[]" type="checkbox"> Three</label>
</li>
<li><button type="button" id="selectall" >select/deselect</button></li>
</ul>

jquery script .

    <script type="text/javascript">
    $(document).ready(function() {
        $('#selectall').click(function(event) {  //on click 
            var atLeastOneIsChecked = $('input[name="checkme[]"]:checked').length > 0;
               if(atLeastOneIsChecked){
                 $('.checkhour').each(function() { //loop through each checkbox
                    this.checked = true;  //select all checkboxes   
                 });
               }else{
               $('.checkhour').each(function() { //loop through each checkbox
                   this.checked = false; //deselect all checkboxes                    
            }); 
         }
    });
});
    </script>