Check and Uncheck All Checkbox using JQuery Example

By Hardik Savani January 30, 2023 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:

Read Also: How to Remove Special Characters from a String in JQuery?
<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>

I hope it can help you...

Tags :
Previous

How to Create Custom Helper Function in Laravel?
Next

How to create custom facade in laravel 5.2?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares