JavaScript: “Smarter” Checkboxes

Author: Marcus Kazmierczak, marcus@mkaz.com

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>