Check and Uncheck checkboxes using JQuery

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

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

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →