
How can I make the text adjacent to my checkbox clickable?I've noticed that on some of the more slick Web 2.0-style Web sites, you can click on the text description adjacent to a checkbox and have it act as if you'd clicked on the checkbox itself, just as you can with regular Windows dialog box elements. How the heck do they do that? This is actually a fun and relatively simple addition to any HTML form, for those of you building your own sites, and it's something that I wish more Web development tools did automatically. There are actually two ways you can accomplish what you seek, but the "standard" way to do it, the way that's detailed in the HTML 4 spec, doesn't work in all browsers, disappointingly. Nonetheless, if you really want to be correct, here's the proper solution to the problem: <input type="checkbox" name="call" id="willcall">
<label for="willcall">click on this text to select the checkbox</label> Nice, elegant, but not completely compatible with all the Web browsers on the market (notably Apple's Safari browser). The way I prefer is to use JavaScript and exploit what we Webheads call the document object model to get to the specific variable that defines whether the checkbox in question is checked or not. Let me demonstrate as it'll be easier to understand! Here's a typical rudimentary form, boiled down to its essence: <form>
Modifications to your coffee order:<br /> <input type="checkbox" name="cb1"> Add whipped cream to your drink (add $0.50) </form> Render it and you'll see a form checkbox with some text adjacent, just as you'd expect: To make the text clickable, you need to first name your form, which is easily done by adding a name="value" to the form tag itself: <form name="f1"> Now the JavaScript to access the checkbox status is: document.f1.cb1.checked As you can see, we need both the form name and the variable name embedded. This value is going to be "true" or "false" depending on if the box is checked. To set it to true, therefore, we need simply specify: document.f1.cb1.checked=true; So we can wrap the text we want to be clickable in a "span" and tie this to the JavaScript event onClick like so: <form name="f1">
Modifications to your coffee order:<br > <input type="checkbox" name="cb1"> <span onClick="document.f1.cb1.checked=true;"> Add whipped cream to your drink (add $0.50)</span> </form> That works, kinda, as you can see here: The problem is, this isn't actually how Windows (and Mac) dialog boxes work. The interface we're used to alternates between checked and unchecked as we click on the adjacent text, so the JavaScript code needs to be just a bit more sophisticated than what we have. One way to do it is to have some clumsy conditional code like "if checked set to false else set to true" but I prefer a bit more concise and elegant solution: <form name="f1">
Modifications to your coffee order:<br > <input type="checkbox" name="cb1"> <span onClick="document.f1.cb1.checked=(! document.f1.cb1.checked);"> Add whipped cream to your drink (add $0.50)</span> </form> That does exactly what you seek: every time someone clicks on the text adjacent to the checkbox, the checkbox is set to whatever state it isn't currently. If it's true, then ! true is false so it's set to false (unchecked) and if it's unchecked, ! false is true, and it's checked. Try it for yourself: Hope that helps you improve your forms and make your HTML more usable! Thanks to Greg Bulmash for helping debug a subtle Firefox incompatibility with the examples too. Greg runs a cool free clip art site.
Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon
Categorized:
CGI Scripts and Web Site Programming
(Article 7316)
Tagged: forms, html, javascript, usability Previous: How much RAM does my Windows PC have? Next: In Google's Gmail, can I delete individual messages in a discussion thread? Subscribe!
Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader. At the time of writing, it appears most major browsers now support the <label for="ID_of_checkbox">Checkbox text</label>. I tested it in Internet Explorer 6 and 7, Safari for Windows 3.1.2, Firefox 3.0.3, Google Chrome 0.2.149.30, and Opera 9.61. All work! So, to me, the simplicity and the fact that it makes much more logical sense mean that doing the javascript option not really worth it, for perhaps a few minor browsers yet to play catch up with this feature. Posted by: Greg at October 23, 2008 9:33 PMI have something to say, now that you mention it, but ...
I do have a comment, now that you mention it!
|
![]()
Search
Find just the answers you seek from among our 2300+ free tech support articles by using our Lijit search engine.
Help!
Subscribe to
Ask Dave Taylor!
Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.
Articles and Reviews
Auctions and Online Shopping Blogs and RSS Feeds Building Web site traffic Business and Management Cell Phones and Mobile Phones CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above HTML and CSS Industry News and Trade Shows Mac OS X Help MySpace, Facebook, Twitter and Social Network Help Pay Per Click (PPC) Search Engine Optimization Shell Script Programming Sony PSP, MP3 Players, Etc. The Writing Business Unix and Linux Help Video Game Tips and Help Windows Help
Recent Entries
Book Links
|