Javascript checkbox

JavaScript
1

I have made an anchor look like a checkbox with this:


<style type="text/css" >
.checkbox{
	display: block;
        width: 20px;
        height: 20px;
	position: relative;
        right: -540px;
        top: -25px;
	overflow:hidden;
	}
.checkbox_u{	
	background-image:url('unchecked.png');
	background-repeat:no-repeat;
	}
.checkbox_c{
	background-image:url('checked.png');
	background-repeat:no-repeat;
	}
</style>
<a class="checkbox checkbox_u" ref="#"  target="unchecked" onmousedown="checked_(this);return false;" />  </a>

and the checked_() function is this

function checked_(checked){
	if(checked.target == 'unchecked'){
		checked.className = 'checkbox checkbox_c';
		checked.target = 'checked'
		}
	else{
		checked.className = 'checkbox checkbox_u';
		checked.target = 'unchecked'
		}
	}

the function changes the className, however sometimes I have to click on it several times in order for it to respond, is there something I can do to make it respond immediately?

By the way, I do need to make it like this, because I could not position the check-box where I needed it to be.
I also tried with span instead of a and using the class attribute inside the function but I get the same problem

This is the function when I tried span:


function checked_(checked){
	if(checked.className == 'checkbox checkbox_u'){
		checked.className = 'checkbox checkbox_c';
		}
	else{
		checked.className = 'checkbox checkbox_u';
		}
	}

And this is what the span looks like:


<span class="checkbox checkbox_u" onmousedown="checked_(this);" /></span>
2

here is a link to the working code