Check and Uncheck checkboxes using JQuery

By Hardik Savani | February 10, 2016 | | 31571 Viewer | Category : HTML jQuery


Sometimes we need to Select and Deselect all checkboxes like you see on gmail if you check top checkbox then automatically select other all.So, we can do using jquery and its method prop().In Following example you can see how is that and 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>



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.