Checkbox inside an onclick element

The checkbox no longer works

[brownthing]

Hi,

I have a number of list items (each with a unique id) each containing one checkbox, - also with a unique id. My aim was to be able to click anywhere in the list item to check the check box, so I wrote the following function, which is called using an onclick="toggleState('id_of_checkbox_within')" which is put on each list item tag <li>.

This all works fine except if you click on the actual checkbox, then it fails to become checked. I think this is to do with event bubbling, but I'm not sure how to fix it. Any ideas?

function toggleState(obj) {
var el = $(obj);
var holder = $('holder_'+obj);

if ( el.checked == true ) {
el.checked = false;
holder.removeClassName('selected');
}
else {
el.checked = true;
holder.addClassName('selected');
}

}

[daveVk]

try onclick="toggleState('id_of_checkbox_within');return true;"

The return value indicating that default processing is required on return;

[astupidname]

The return value indicating that default processing is required on return;

called using an onclick="toggleState('id_of_checkbox_within')" which is put on each list item tag <li>.

Oops, someone did not see the "list item tag <li>" , which has no default processing - so returning true in the onclick in the <li> would mean nothing.

I would suggest putting the onclick in the <input /> tag also in addition to the <li>, - that will work!

[daveVk]

"list item tag <li>" , which has no default processing

While the onclick does nothing directly on this tag, default processing probably means passing the event on to child elements ? I am not sure.

Also consider enclosing the li with <label>