افکتی برای checkbox و radio button

<head>
<script src=”http://code.jquery.com/jquery-latest.js” type=”text/javascript”></script>
<style type=”text/css”>
input[type=”checkbox”],input[type=”radio”] {
padding:0;
margin:0;
opacity:0;
}
.div-as-checkbox,.div-as-radio{
border:1px solid #ddd; float:left; position:relative; margin-left:20px; border-radius:3px; background-color:#f2f2f2;
border-left-color:#c5c5c5; border-top-color:#c5c5c5; direction:ltr !important
}
.div-as-checkbox:hover,.div-as-radio:hover{
border-color:#aaa;
}
.div-as-radio{
border-radius:10px;
}
.div-as-radio img{
margin:0 1px 1px 2px;
}
.div-as-radio img.selected,.div-as-checkbox img.selected{
display:block
}
.div-as-checkbox img,.div-as-radio img{
display:none
}
.radio,.tick {
left:0
}
</style>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.div-as-checkbox input[type=’checkbox’]”).click(function() {
$(this).parent().find(‘img.tick’).toggle();
});
$(“.div-as-radio input[type=’radio’]”).click(function() {
$(‘.div-as-radio’).not(this).parent().find(‘img.radio’).hide();
$(this).parent().find(‘img.radio’).show().addClass(‘selected’);
});

});
</script>
</head>

<body>
<div class=”div-as-checkbox”><img src=”../images/radio-checkbox/tick-icon.png” style=”position:absolute; bottom:1px” class=”tick” />
<input name=”test” type=”checkbox” value=”” border=”0″ />
</div>
<div class=”div-as-checkbox”><img src=”../images/radio-checkbox/tick-icon.png” style=”position:absolute; bottom:1px” class=”tick selected” />
<input name=”test” type=”checkbox” value=”” border=”0″ />
</div>
<div class=”div-as-checkbox”><img src=”../images/radio-checkbox/tick-icon.png” style=”position:absolute; bottom:1px” class=”tick” />
<input name=”test” type=”checkbox” value=”” border=”0″ />
</div>
<div class=”div-as-radio”><img src=”../images/radio-checkbox/radio-icon.png” style=”position:absolute; bottom:1px” class=”radio selected” />
<input name=”test” type=”radio” value=”” border=”0″ />
</div>
<div class=”div-as-radio”><img src=”../images/radio-checkbox/radio-icon.png” style=”position:absolute; bottom:1px” class=”radio” />
<input name=”test” type=”radio” value=”” border=”0″ />
</div>
<div class=”div-as-radio”><img src=”../images/radio-checkbox/radio-icon.png” style=”position:absolute; bottom:1px” class=”radio” />
<input name=”test” type=”radio” value=”” border=”0″ />
</div>
</body>