JavaScript : Smarter Checkboxes

The following easy-to-implement script makes checkboxes in web forms “smarter” and easier for your users. When the text next to a checkbox (that is, the text that describes the checkbox) is clicked, the box is marked as checked. This makes your forms behave the same as the standard desktop interface.

This script also fixes a problem identified in a usability concept that I cannot remember the name of. It boils down to the fact that when you ask a user to click a little, tiny region of the screen, the user is more likely to miss the target and either select the wrong item, or select nothing at all. This script will reduce these common and unnecessary errors by providing a bigger target. It will also make it easier on users. We can all use a break sometime. Effort spent clicking the exact right spot is not necessary.

All forms that use checkboxes (and radio buttons) should try to duplicate the functionality of the common user interfaces because that is what the user expects.

Here’s an example:

Select the items you want:

Item 1
Item 2
Item 3
Item 4

JavaScript Code


<script language="JavaScript">

function cboxclick(item)
{
    // check if already checked and toggle
    if (document.f.cb[item].checked) { document.f.cb[item].checked=false; }
    else { document.f.cb[item].checked=true; }
}

</script>

HTML Code

<form name="f">
<p><b>Select which items you want:</b><br />
<blockquote>
   <span onClick="cboxclick(0)"><input type="checkbox" name="cb" value="item1">Item 1</span><br />
   <span onClick="cboxclick(1)"><input type="checkbox" name="cb" value="item2">Item 2</span><br />
   <span onClick="cboxclick(2)"><input type="checkbox" name="cb" value="item3">Item 3</span><br />
   <span onClick="cboxclick(3)"><input type="checkbox" name="cb" value="item4">Item 4</span><br />
</blockquote></form>

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads

Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources