Javascript - Selecting several boxes

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

The source code:
<html> <head> <script type="text/javascript"> function checkall(it) { var len=it.name.length - 4; if(it.checked == true) { for(var j=0;j<document.getElementsByTagName('input').length;j++) { //the 4 is the length of 'fall' (name used to recognize the top element) if(document.getElementsByTagName('input').item(j).name.substring(0,4 + len) == it.name) document.getElementsByTagName('input').item(j).checked= true; } } else { for(var j=0;j<document.getElementsByTagName('input').length;j++) { if(document.getElementsByTagName('input').item(j).name.substring(0,4 + len) == it.name) document.getElementsByTagName('input').item(j).checked= false; } } } //--> </script> </head> <body> <table> <tr> <td colspan="2" style="background-color: rgb(198, 229, 248);"><b>Select the checkboxes you wishe to rename or delete and click the update button</b></td> </tr> <tr class="folder"> <td><input name="fall0" onclick="javascript:checkall(this);" type="checkbox"></td> <td><input name="f0" value="nameoff0" type="text"></td> </tr> <tr> <td><input name="fall0_2" type="checkbox"></td> <td>Some data</td> </tr> <tr> <td><input name="fall0_9" type="checkbox"></td> <td>Some data</td> </tr> <tr class="folder"> <td><input name="fall1" onclick="javascript:checkall(this);" type="checkbox"></td> <td><input name="f1" value="nameoff1" type="text"></td> </tr> <tr> <td><input name="fall1_5" type="checkbox"></td> <td>Some data</td> </tr> <tr> <td><input name="fall1_6" type="checkbox"></td> <td>Some data</td> </tr> <tr class="folder"> <td><input name="fall2" onclick="javascript:checkall(this);" type="checkbox"></td> <td><input name="f2" value="nameoff2" type="text"></td> </tr> <tr><td><input name="fall2_0" type="checkbox"></td> <td>Some data</td> </tr> </table> </body> </html>

Note: you may include this script inside any html pages and customize it as you wish.

Comments

Post the first comment now
or discuss about it at this address:
Forum - Javascript

Webmaster Corner

The Millionaire league
Dozens of Easy and Automatic Ways to Make Money Online Everyday!

Niche Annihilation Method
Crush Your Competition!
Download the method Now

iPowerWeb
Incredible Membership Packages - Web Hosting!

One Month Free Trial! ProStores - an eBay Company
Gain customers, increase sales, and boost profits with your own Web Store.

→ Get Google Pay-Per-Click Ads Free!
→ Automated Cash Formula $$$

Javascript - Selecting several boxes

Javascript - Selecting several boxes

Comments

Webmaster Corner

Categories