Whilst browsing through the JavaScript category of del.icio.us yesterday, I chanced apon the link 9 Javascript(s) you better not miss !! and, like thousands of others, decided to check it out.
Unfortunatly, the scripts presented teach nothing but bad practice (uppercase tags, the use of document.forms, inline JavaScript etc).
I fully understand that the authors intentions were entirely honourable but I can’t help thinking that most of the scripts could actually be rewritten to promote current best practices. To start the ball rolling, I decided to rewrite example one – “A Single click for checking-unchecking multiple check boxes”.
The original script
The current script hard codes the check/uncheck buttons within the page HTML which doesn’t degrade well – with JavaScript disactivated the buttons still appear on screen but do nothing when clicked.
It would be a better solution to create the buttons dynamically with a sneaky bit of unobtrusive JavaScript. This way, users with JavaScript turned off won’t get presented with two useless form controls.
It would also be nice to remove all of the inline JavaScript and clean up the non-standard HTML presented within the orignal example.
The rewritten script
On page load, all forms are scanned to see if they contain at least one className of the type “fdCheckbox-the checkbox group classname”; for example, the classname “fdCheckbox-groupA” will initiate the creation of the check/uncheck buttons for each checkbox whose className contains “groupA“ (all checkboxs without groupA in the className will be left untouched by the check/uncheck action).
Button creation & placement
If multiple checkboxs with the given className are located, the script then creates the check/uncheck buttons and adds them to the DOM. Multiple checkboxs are required as logically, it would be useless to create the buttons for a single checkbox.
To enable the buttons to be placed wherever you wish, the script checks to see if the form contains a child div with a className of “button-placeholder-the checkbox group classname”. If found, the buttons are created as child elements of the div in question. If not, the buttons are created as child elements of the form itself.
Styling the buttons
The buttons are given the className “fd-but” which means they can be styled with any CSS you deem necessary (as usual, they have been left blatently unstyled for the demo).
View the rewritten A Single click for checking-unchecking multiple check boxes demo.
24/03/2006:
- The script has been updated to use the checkBox className and not the checkBox name attribute.
Previous Comments ~
Is there any particular reason for using duplicate elements names in the form, when the element is NOT a radiobutton? I was under the impression that it is bad html.
@ Whatever: Duplicate ID’s are certainly illegal but duplicate names are a common way of sending “arrayesque” form results back to the server (in an identical fashion to the “multi-select” select list).
The HTML 4.0 Spec is worth a look. I don’t think anything has changed in this respect between HTML 4.0 and XHTML 1.0.
Regards,
Brian.
@ Whatever: Your comment actually made me realise that I shouldn’t be relying on the inputs “name” attribute at all as this means all checkboxs have to be named identically for the check/uncheck action to work – a severe limitation indeed.
I’ve changed the script to work with classNames now, this enables the checkboxs to be named individually and still be included within the check/uncheck action.
Regards,
Brian.
hey i like your script but I’m having trouble modifying for my purposes.
I need to create button names at run time based on database output. Then when these buttons are clicked, corresponding checkboxes are selected. There is no need to deselect any checkboxes. I also need to put text beside the buttons and organise them using CSS.
Can I embed the buttons into the html (just like the checkboxes) and use onclicks to run the script? I’ve been trying all day with no luck!
cheers
@ Andy: It sounds as if you need to write your own bespoke JavaScript function. The script presented here should be able to help you on your way (placing text beside the buttons is easy, just embed the text within the button placeholder div server side and change the script to add the buttons before, and not after, the text in question).
It should also be easy to remove the creation of the ‘uncheck’ buttons from the current script.
As for naming the buttons, I suggest you create a JavaScript object (server-side) that list’s checkbox classNames and the required button text i.e.
var names = {
className1:”text for the button”,
className2:”text for the button”
};
You can then get the script to check this Object for the correct button text i.e. Change the following line:
but1.value = “Check All”;
to be:
var buttonText = (classname in names) ? names[classname] : “check all”;
but1.value = buttonText;
Hope this helps, regards,
Brian.
Comments are currently closed for this article but feel free to email me with your input - I’d love to hear it.