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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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
1 2 3 4 5 6 7 8 | $(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.