JQuery select/DeSelect all Check Box Example With Souce Code
Overview: What You will Need:
JQuery select Unselect All Check Box Will Help to Selecting Multiple Check at a Times.
You will Needs 4 Files:
index.html
style.css
script.js
jquery_latest.js
Note: Put All files In same Folder.
Copy and Paste The Below Code to Desired File
Download jquery_latest.js from ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
Code For index.html
<!DOCTYPE html>
<html>
<head>
<title>MegaTech24 JQuery Onclick select All/DeSelect All tutorials</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="jquery_latest.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="content_pane">
<form action="" method="post">
<input id="checkAll" type="checkbox" name="selectAll"/>Select All
<p><input class="purchase" type="checkbox" name="product1"/>Blogging</p>
<p><input class="purchase" type="checkbox" name="product2"/>SEO Service</p>
<p><input class="purchase" type="checkbox" name="product3"/>Web Development</p>
<p><input class="purchase" type="checkbox" name="product4"/>Theme Pack</p>
<input type="submit" name="submit"/>
</form>
</div>
</body>
</html>
Code For style.css
body{
font-family:Verdana;
font-size:13px;
}
#content_pane{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
#content_pane form{
}
#content_pane input{
}
Code For script.js
$(document).ready(function(){
$('#checkAll').click(function(){
var c = this.checked;
$('input[type="checkbox"]').each(function(){
$(this).prop('checked',c);
});
});
});
Please Comments If You have any Problems.
If You Like This Article Please Like US on Facebook.
Thank You for reading My Article.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.