Skip to content

Instantly share code, notes, and snippets.

@atatos
Created August 26, 2013 14:16
Show Gist options
  • Save atatos/6341876 to your computer and use it in GitHub Desktop.
Save atatos/6341876 to your computer and use it in GitHub Desktop.
.checkbox {
background: url("../img/common/checkbox.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
float: left;
height: 11px;
margin: 0 5px 0 0;
position: relative;
width: 11px;
}
.checkbox.on {
background-position: 0 -13px;
}
.checkbox input {
cursor: pointer;
height: 11px;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 0;
width: 11px;
}
<span class="checkbox">
<input type="checkbox" checked="checked" id="check_1" value="checkbox one" name="check[]">
</span>
checkBox : function() {
var checkBox = $('.checkbox');
// if an input is selected in page loading
checkBox.find('input[type="checkbox"]').each(function(index, key) {
if ( $(this).is(':checked') ) {
$(this).parent().addClass('on');
}
});
checkBox.find('input[type="checkbox"]').on('change', function() {
if ( $(this).is(':checked')) {
$(this).parent().addClass('on');
}else {
$(this).parent().removeClass('on');
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment