Пример моего кастомного чекбокса (checkbox)

28.02.2018

Это не законченный код. Хотел написать собственную замену стандартным checkbox, накидал основу, но до конца не довел. Готовых красивых checkbox'ов много, т.ч. нет смысла делать еще одну.

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>	

Скачать


Пометки: checkbox
Яндекс.Метрика