Checkbox not checking

JavaScript
1

I’ve got a checkbox in an li element. I put an onclick on the li element to toggle the checkbox. This works fine if I am over the li element but not over the checkbox. But if I am over the checkbox the checkbox doesn’t change (or it changes twice returning it to the original state). So how do I get this working properly?

The code below has all the relevant stuff in it I think, but here’s a link to the full online version. The checkboxes are in the fourth tab. http://bokehman.com/UI-test/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1">
<script type="text/javascript">
onload = layout

function layout()
{
 LIs = document.getElementById('choose').getElementsByTagName('li')
 for(i=0; i<LIs.length;i++)
 {
  LIs[i].onclick=function(){
   return toggle(this)
  }
 }
}

function toggle(caller)
{
 caller.firstChild.checked = !caller.firstChild.checked
 return false
}
</script>

<title></title>

</head>

<body>

<div id="choose">
<ul>
<li><input type="checkbox" name="choose[]" value="-1770"> 177.0W NSS 9</li>
<li><input type="checkbox" name="choose[]" value="-1390"> 139.0W AMC 8</li>
</ul>
</div>

</body>
</html>
2

I essentially used your code but had no issues when it came to toggle the checkbox.

3

I just checked your link and it doesn’t work in Firefox or IE. If you put the pointer over the text it toggles the checkbox. But if you put the pointer over the checkbox itself and click it will not update the checkbox.

4

Shouldn’t you get the input tag instead of li?

LIs = document.getElementById(‘choose’).getElementsByTagName(‘input’);

5

Not, his concept was to allow users to click anywhere within the LI element and have the checkbox be toggled.

See the updated link which fixes the issue http://jsfiddle.net/g93C9/

6

Hi thanks for the help. I’ve just found the following does almost the same thing without any need for Javascript.

<li><label><input type="checkbox" name="choose[]" value="-1770">177.0W NSS 9</label></li>
<li><label><input type="checkbox" name="choose[]" value="-1390">139.0W AMC 8</label></li>
7

Good spotting there - it is much more preferable to use non-scripted techniques where practical.