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

28.02.2018 12:10:07

Это не законченный код. Хотел написать собственную замену стандартным 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
Яндекс.Метрика