Skip to content

Instantly share code, notes, and snippets.

@beshur
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save beshur/76ea868f3e4a7d1c7acc to your computer and use it in GitHub Desktop.
Save beshur/76ea868f3e4a7d1c7acc to your computer and use it in GitHub Desktop.
jQuery Simple checkbox javascript after styling
.e_checkbox,
.e_radiobox {
position: relative;
display: inline-block;
width: 17px;
height: 17px;
margin-right: 5px;
}
.e_checkbox input,
.e_radiobox input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.e_checkbox:before,
.e_radiobox:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
background: url(../img/spr_radio_check.png) -16px -17px no-repeat;
}
.e_checkbox.checked:before {
background-position: -16px 0;
}
.e_radiobox {
width: 16px;
height: 16px;
}
.e_radiobox:before {
width: 16px;
height: 16px;
background: url(../img/spr_radio_check.png) -16px -16px no-repeat;
}
.e_radiobox.checked:before {
background-position: -16px 0;
}
/* simple checkbox and radio buttons javascript after styling */
$(function() {
prepareGeneralControls();
});
$("body").on("change", ".e_checkbox > input, .e_radiobox > input", function(e) {
var i = $(this);
var obj = $(this).parent();
if (i.is(":checked")) {
obj.addClass("checked");
} else {
obj.removeClass("checked");
}
});
function prepareGeneralControls() {
$("form input[type='checkbox']").each(function() {
if (!$(this).parent().is(".e_checkbox")) {
if ($(this).is(":checked")) {
$(this).wrap('<span class="e_checkbox checked"></span>');
} else {
$(this).wrap('<span class="e_checkbox"></span>');
}
}
});
$("form input[type='radio']").each(function() {
if (!$(this).parent().is(".e_radiobox"))
$(this).wrap('<span class="e_radiobox"></span>');
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment