Это не законченный код. Хотел написать собственную замену стандартным checkbox, накидал основу, но до конца не довел. Готовых красивых checkbox'ов много, т.ч. нет смысла делать еще одну.
Пример кастомного чекбокса (checkbox)
28.02.2018
index.php (Download)
<!DOCTYPE HTML>
<html lang="RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
.soCheckbox input
{
display: none;
}
.soCheckbox {
background: rgba(0, 0, 0, 0) url("images/chekbox.png") no-repeat scroll 0px 0px;
display: block;
height: 16px;
width: 20px;
float: left;
}
.soCheckbox.checkboxOn {
background-position-y: -16px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.soCheckbox, .soCheckbox2').on('click', function(event){
event.preventDefault();
var el = $(this),
checkbox = el.children("input"),
checked = checkbox.prop("checked")
;
checked = !checked;
if( checked )
{
el.addClass("checkboxOn");
}
else
{
el.removeClass("checkboxOn");
}
checkbox.prop("checked", checked);
el.triggerHandler( "soChange" );
});
});
</script>
</head>
<body>
<div>
<div class="soCheckbox"><input type="checkbox" id="chBox1"></div> Ok1
</div>
<div>
<div class="soCheckbox"><input type="checkbox" id="chBox2"></div> Ok2
</div>
</body>
</html>