Check and Uncheck checkboxes using JQuery

By Hardik Savani | February 10, 2016 | | 972 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>