<label> Tag doesn't work - text not clickable on checkboxes

[evlj]

I'm not sure if this is the right section, if not, please move it on proper one, i'm still newbie.

 

However, here's my problem, i'm using jquery to replace standard check boxes with images, and here's the code:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");

/* handle the user selections */
$(".checklist .checkbox-select").click(
	function(event) {
		event.preventDefault();
		$(this).parent().addClass("selected");
		$(this).parent().find(":checkbox").attr("checked","checked");
	}
);

$(".checklist .checkbox-deselect").click(
	function(event) {
		event.preventDefault();
		$(this).parent().removeClass("selected");
		$(this).parent().find(":checkbox").removeAttr("checked");
	}
);

});

</script>

 

Here's the css:

<style type="text/css">

body {
font: 12px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif;
}

form {
margin: 0 0 30px 0;
}

legend {
font-size: 17px;
}

fieldset {
border: 1;
}

.checklist {
list-style: none;
margin: 0;
padding: 0;
}

.checklist li {
float: left;
margin-right: 10px;
background: url(i/checkboxbg.gif) no-repeat 0 0;
width: 105px;
height: 80px;
position: relative;
font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif;
}

.checklist li.selected {
background-position: -105px 0;
}

.checklist li.selected .checkbox-select {
display: none;
}

.checkbox-select {
display: block;
float: left;
position: absolute;
top: 55px;
left: 10px;
width: 85px;
height: 23px;
background: url(i/select.gif) no-repeat 0 0;
text-indent: -9999px;
}

.checklist li input {
display: none;	
}

a.checkbox-deselect {
display: none;
color: white;
font-weight: bold;
text-decoration: none;
position: absolute;
top: 55px;
right: 10px;
}

.checklist li.selected a.checkbox-deselect {
display: block;
}

.checklist li label {
display: block;
text-align: center;
padding: 8px;
}

.sendit {
display: block;
float: left;
top: 118px;
left: 10px;
width: 115px;
height: 34px;
border: 0;
cursor: pointer;
background: url(i/sendit.gif) no-repeat 0 0;
text-indent: -9999px;
margin: 20px 0;
}

</style>

 

And finally the form thing

<ul class="checklist"><li><input name="jqdemo" value="value5" type="checkbox" id="choice_c"/><label for="choice_c">Some Text Here to be checked - clicked</label><a class="checkbox-select" href="#">Click</a><a class="checkbox-deselect" href="#">Cancel</a></li></ul>

 

 

I would like that my text on top of checkboxes become clickable.

[trq]

I'm not sure if this is the right section, if not, please move it on proper one, i'm still newbie.

 

Considering your post contains no PHP its quite obvious this isn't the right board. How about you think before posting where ever you like.