Check and Uncheck checkboxes using JQuery

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


Share this post:



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>