homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Custom check box
Gowri pandiyan




msg:4662801
 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"/>

 

Gowri pandiyan




msg:4663040
 3:37 am on Apr 15, 2014 (gmt 0)

Hi Gurus,

Please help me out on the above request.

Readie




msg:4663468
 12:01 pm on Apr 16, 2014 (gmt 0)

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




msg:4663496
 1:21 pm on Apr 16, 2014 (gmt 0)

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

Readie




msg:4663567
 4:29 pm on Apr 16, 2014 (gmt 0)

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




msg:4665449
 9:07 am on Apr 24, 2014 (gmt 0)

Thanks for your reply! :)

Gowri pandiyan




msg:4665450
 9:07 am on Apr 24, 2014 (gmt 0)

Thanks for your reply! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved