Check/Uncheck all checkbox using jQuery

Post Views: 1,296

Hi Guys, In this post let’s learn using jquery how to check all checkboxes if not checked and if they all checked it will uncheck Let’s Begin:-

HTML

<html>
<input type="checkbox" id="checkAll">Check All
<hr />
<input type="checkbox" id="checkItem">Item 1
<input type="checkbox" id="checkItem">Item 2
<input type="checkbox" id="checkItem">Item3
</html>

<html>

<input type="checkbox" id="checkAll">Check All

<hr />

<input type="checkbox" id="checkItem">Item 1

<input type="checkbox" id="checkItem">Item 2

<input type="checkbox" id="checkItem">Item3

</html>

Before Code for jquery don’t forget to add the CDN link.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Jquery Code:-

<script> 
$("#checkAll").click(function () {
     $('input:checkbox').not(this).prop('checked', this.checked);
 });
</script>

$("#checkAll").click(function () {

$('input:checkbox').not(this).prop('checked', this.checked);

});

</script>

Another code:-

<script>
    $(document).ready(function() {
        $("#checkAll").click(function() {
            $("#checkItem").prop('checked', $(this).prop('checked'));
        });
    });
</script>

$(document).ready(function() {

$("#checkAll").click(function() {

$("#checkItem").prop('checked', $(this).prop('checked'));

});

</script>

SOURCE

Hope it will be useful for you. Do like & share with your developer’s community. It motivates us to keep posting valuable content.