need help with this clickable checkbox label
Here's my attempt at coding up a checkbox that resides in a TD, and clicking anywhere in the TD toggles the checkbox. There are only a couple of problems:
1. It doesn't work in IE
2. I'd like to prevent the cursor from changing when it moves over the text.
Any suggestions? Is there a library which already does this? Thanks!
Update: And any coding style suggestions would be welcome, too.
-
<html>
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$(".b").css('background-color', 'pink');
$(".b").attr('onclick','return doclick(this);');
$(".b").css({ 'background-color' : 'white', 'border-width' : 1, 'border-style' : 'solid'});
$(".c").attr('onclick','event.stopPropagation(); updateBackground(this)');
$(".c").each(function (i) { updateBackground(this); });
});
function updateBackground(cb) {
var cbid = cb.id;
var tdid = cbid.substring(0, cbid.length-1);
var td = $("#"+tdid);
td.css('background-color', cb.checked ? 'lightblue' : 'white');
}
function doclick(td) {
var id = td.id+"c";
var widget = $("#"+id);
var td = $("#"+td.id);
var checked = widget.attr("checked");
widget.attr("checked", !checked);
widget.each(function(i) { updateBackground(this); });
}
</script>
<style>
td { background-color: blue; width: 250px; font-family: Arial,sans-serif }
</style>
</head>
<body>
<table>
<tr><td class="b" id="b1"> <input class="c" id="b1c" type=checkbox value=1 name=foo>Name</td></tr>
<tr><td class="b" id="b2"> <input class="c" id="b2c" type=checkbox value=1 name=foo>Address</td></tr>
<tr><td class="b" id="b3"> <input class="c" id="b3c" type=checkbox value=1 name=foo>City</td> </tr>
<tr><td class="b" id="b4"> <input class="c" id="b4c" type=checkbox value=1 name=foo>Zip</td> </tr>
<tr><td class="b" id="b5"> <input class="c" id="b5c" type=checkbox value=1 name=foo>Country</td> </tr>
</table>
</body>
</html>