Красивый чекбокс с помощью jQuery

Віталий

10 років ago

Доброго времени суток. 🙂

Часто, разрабатывая дизайн сайта или какой то страницы, владельцы сайтов просят дизайнеров, нарисовать необычные и красивые чекбоксы, или флажки, кому как удобно, в общим элемент input type="checkbox". В нарисованном макете все смотрится очень шикарно и всем все нравится, но как воплотить задуманное в реальность и сделать на странице стилизованный чекбокс.

С решением этой проблемы или воплощением задуманного Вами в реальность, предлагаю следующий метод. С помощью jquery, этот метод будет задавать чекбоксу нужную картинку. Тоесть, у Вас должна быть нарисованная картинка активного и неактивного флажка. Ниже пример, как будет работать готовый вариант

Если это то что Вам нужно, то приступим к началу работы

Как обычно для скриптов. который используют jquery, сначала надо подключить библиотеку, но это нужно делать только в том случаи, если Вы ранее этого не делали или Ваша система управления сайтом по умолчанию сама ее не подключила.

В шапке или подвале сайта, указываем путь к нашей библиотеке

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Сразу после подключения библиотеки добавляем скрипт, который сделает задуманное.

<script type="text/javascript">
$(document).ready(
 function(){
 $.each($(".checkbox"),function(){
 if($("input", this).is(':checked')){
 $(this).addClass("checked")}});
 $(".checkbox").click(function(){
 $(this).toggleClass("checked");
 var path = $("input", this);
 if(path.is(':checked')){
 path.attr("checked", false);
 }else{ path.attr("checked", true)}});
 });
</script>

Теперь в нужном месте, там где будут установлены флажки, скорее всего это какая-нибудь форма, нужно добавить элемент input type="checkbox", предварительно заключив его в родительский span и присвоив ему класс checkbox.

<span class="checkbox">
 <input type="checkbox" name="one" value="1" id="one" />
 <span class="check"></span>
 <label for="one"> Пункт1</label>
 </span>

По коду Вы видите, что после input - добавлен еще один span, которому присвоен класс check. Этот элемент и будет новым измененным флажком.

Теперь нужно добавить стили всем элементам, нашего кода.

span.checkbox{ 
  cursor:pointer;
  display:inline-block;
  height:27px;
  padding:0;
  margin:0;}
span.checkbox:hover{
  background:none;}
span.checkbox:hover .check{
  border-color:none;}
span.checkbox input{
  display:none;}
span.checkbox .check{
  float:left;
  width:27px;
  height:27px;
  background: #fff url(checkbox.png) no-repeat 0 -4px;
  padding: 0;}
span.checkbox.checked .check{
  background: url(checkbox.png) no-repeat 0px -31px;}

Ну и картинка как пример, сохраните ее себе, нажав на него правой кнопкой мыши и выбрав - Сохранить изображение. По надобности замените своей, но если у нее другой размер, то правильно укажите его в стилях.

Таких флажков можно создавать много, просто нужно указывать разные значения name и id. В нашем случаи это one. Тоесть для каждого нового флажка, придумайте новое имя. Если все сделано правильно, Вы увидите готовый результат.

А Вы на своем сайте используете стандартные чекбоксы или все же отдаете предпочтения стилизованным?

На этом все, спасибо за внимание. 🙂

Exit mobile version