Welcome to WebmasterWorld Guest from 54.197.116.116

Forum Moderators: open

Message Too Old, No Replies

Custom check box

   
6:29 am on Apr 14, 2014 (gmt 0)



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"/>
3:37 am on Apr 15, 2014 (gmt 0)



Hi Gurus,

Please help me out on the above request.
12:01 pm on Apr 16, 2014 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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');
}
1:21 pm on Apr 16, 2014 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@Readie, how would you check/uncheck the checkbox if it has display:none?
4:29 pm on Apr 16, 2014 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Wrap a checkbox and anything else in a label. Click that "anything else" and it behaves the same as clicking on the checkbox.
9:07 am on Apr 24, 2014 (gmt 0)



Thanks for your reply! :)
9:07 am on Apr 24, 2014 (gmt 0)



Thanks for your reply! :)