Check and Uncheck all checkboxes with jQuery

Checkbox Plays a key role in forms. We always try to find some shortcut way. The check and uncheck all functionality basically a shortcut where the large list of records are available and all of them need to select through one click. By this functionality user can easily do work.

"I am literally confused how to check and uncheck all checkboxes with jQuery." you inner mind is speaking like that maybe. But, now I am here to help you how to do it with jQuery. I will show you, how to check all parent checkboxes with button and without button.
Here is the HTML:

<!-- jQuery: https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.min.js -->
<!-- Bootstrap 4.1v -->
<div class="container my-3">
  <h2>Example1 - Check and Uncheck All With Single Button</h2>
  <input type="button" class="box btn btn-default mb-3" id="box" value="check all" />
  <div>
    <input type="checkbox" class="cb-element" id="ex1-check1" />
    <label for="ex1-check1">
      <a href="https://www.nohypenolies.com/2018/09/best-way-to-get-current-page-url-in-php.html">Best way to get the current page url in php</a>       
    </label>
  </div>
  <div>
    <input type="checkbox" class="cb-element" id="ex1-check2" />
    <label for="ex1-check2">
      <a href="https://www.nohypenolies.com/2018/09/how-to-secure-your-website-php.html">How to secure your website php</a>
    </label>
  </div>
  <div>
    <input type="checkbox" class="cb-element" id="ex1-check3" />
    <label for="ex1-check3">
      <a href="https://www.nohypenolies.com/2018/09/how-to-hide-files.html">How to lock a folder without any third party software</a>
    </label>
  </div>
</div>

<div class='container my-5'>
  <h2>Example2 - Select With Checkbox (Extra Feature)</h2>
  <input type="checkbox" class="mb-3" id='checkall' /> Select All
  <div>
    <input type="checkbox" class='checkbox' name="languages" id="ex2-check1" />
    <label for="ex2-check1">
      Best way to get the current page url in php       
    </label>
  </div>
  <div>
    <input type="checkbox" class='checkbox' name="languages" id="ex2-check2" />
    <label for="ex2-check2">
      How to lock a folder without any third party software
    </label>
  </div>
  <div>
    <input type="checkbox" class='checkbox' name="languages" id="ex2-check3" />
    <label for="ex2-check3">
      Best way to get the current page url in php       
    </label>
  </div>
  <div>
    <input type="checkbox" class='checkbox' name="languages" id="ex2-check4" />
    <label for="ex2-check4">
      The best example of the difference between JavaScript and jQuery   
    </label>
  </div>

</div>

Here is the example 1

So, if you want to replace parent checkbox with a input button, and change the text also on the button to checkall/uncheckall. Here is the code.  

$(document).ready(function() {
  // Check and Uncheck All With Single Button
  $("#box").click(function() {
    if ($("#box").val() == "check all") {
      $(".cb-element").prop("checked", true);
      $("#box").val("uncheck all");
    } else if ($("#box").val() == "uncheck all") {
      $(".cb-element").prop("checked", false);
      $("#box").val("check all");
    }
  });
});

Here is the example 2

Via this code check the all options below the Select all checkbox. You will see some change in there.

$(document).ready(function() {
 // Select With Checkbox(Extra Feature)
  $("#checkall").change(function() {
    var checked = $(this).is(":checked");
    if (checked) {
      $(".checkbox").each(function() {
        $(this).prop("checked", true);
      });
    } else {
      $(".checkbox").each(function() {
        $(this).prop("checked", false);
      });
    }
  });

  // Changing state of CheckAll checkbox
  $(".checkbox").click(function() {
    if ($(".checkbox").length == $(".checkbox:checked").length) {
      $("#checkall").prop("checked", true);
    } else {
      // $("#checkall").removeAttr("checked");
      $("#checkall").prop("checked", false);
    }
  });
});

So this is the simple way to do your work. I have tried my best to do it simple if you think its really critical then please let me know. I will do a very deep research on that. I will try my best.
Here is the live demo of your problem.

See the Pen Check and uncheck all checkboxes with jquery by Araf Hossain (@arafhosssain) on CodePen.