Custom check box

[Gowri pandiyan]

Hi Gurus,

I would like to replace the default check box with tick images, below is the code I tried for the same.

But I'm getting check box along with the image I called. Kindly help me out on this.

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

<style type='text/css'>


#N2_1_3 {


background: url( http://www.example.com/geetanjali/MROC/JON/unchecked50.png ) no-repeat;



}
#N2_1_3.checked{
background: url( http://www.example.com/geetanjali/MROC/JON/checked50.png ) no-repeat;

}
</style>





<script type='text/javascript'>
$(window).load(function(){
$("#N2_1_3").click(function(){
$(this).toggleClass('checked')
});
});

</script>


<input tabindex="7" type="checkbox" name="N2_1_3" id="N2_1_3" value="1"/>

[Gowri pandiyan]

Hi Gurus,

Please help me out on the above request.

[Readie]

Javascript isn't even required for this. You can use labels with checked and next-sibling CSS selectors.

So, your HTML will look like this:

<label>
<input type="checkbox" class="custom_checkbox">
<div></div>
</label>

And your CSS would look like this:

.custom_checkbox {
display: none;
}

.custom_checkbox + div {
height: 16px;
width: 16px;
display: inline-block;
background-image: url('/images/unchecked.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

.custom_checkbox:checked + div {
background-image: url('/images/checked.png');
}

[Fotiman]

@Readie, how would you check/uncheck the checkbox if it has display:none?

[Readie]

Wrap a checkbox and anything else in a label. Click that "anything else" and it behaves the same as clicking on the checkbox.

[Gowri pandiyan]

Thanks for your reply! :)

[Gowri pandiyan]

Thanks for your reply! :)