Home Html Check and Uncheck checkboxes using JQuery

Check and Uncheck checkboxes using JQuery

by Shahriar Sagor
Check and Uncheck checkboxes using JQuery

Today now in this example i will show you how to check and uncheck checkboxes by using JQuery. We know sometimes you need to Select and Deselect all checkboxes as like we are see on gmail if we can check top checkbox then we can automatically select other all. From here you will learn how to Check and Uncheck checkboxes using JQuery.

So, we can do this by using jquery and also its method prop().So now in following example we can see how is that and how we can use this example simply:

Example:

<html lang="en">
<head>
 <title>Select and Deselect Checkbox</title>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>

 <input name="subject_all" class="subject-all" type="checkbox">Select All<br/>
 <input value="1" name="subject" class="subject-list" type="checkbox">Subject 1  
    <input value="2" name="subject" class="subject-list" type="checkbox">Subject 2  
    <input value="3" name="subject" class="subject-list" type="checkbox">Subject 3  
    <input value="4" name="subject" class="subject-list" type="checkbox">Subject 4  
    <input value="5" name="subject" class="subject-list" type="checkbox">Subject 5  

    <script type="text/javascript">
     $('.subject-all').on('change', function() {
      if(this.checked){
      $('.subject-list').prop('checked', true);  
      }else{
      $('.subject-list').prop('checked', false);
      }
 });
    </script>
</body>
</html>

Read Also : How to push item to 0 index or first of $scope object in AngularJS?

Thanks for read. I hope it help you. For more you can follow us on facebook.

close

You may also like