Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Кастомизация radio button (https://javascript.ru/forum/dom-window/61698-kastomizaciya-radio-button.html)

kos0760 03.03.2016 14:28

Кастомизация radio button
 
Ребят, помогите кастомизировать радио кнопки.

Вот простой код:

<style type="text/css">
   .checkbox-checked {
    background: #FFCC00;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(window).load(function() {
//проверяет при загрузке страницы, отмечен чекбокс или нет и на отмеченные чекбоксы вешает класс.
    $('input[type="radio"]').each(function () {
        if ($(this).prop('checked')) {
            $(this).parent().addClass('checkbox-checked');
        }
     });

  //по клику лейблу присваивается или удаляется класс, в зависимости от того, что в атрибуте "checked".
    $('input[type="radio"]').bind("change", function(){
      if ($(this).is(":checked")) {
          $(this).parent('label').addClass('checkbox-checked');
      }
      else {
         $(this).parent('label').removeClass('checkbox-checked');
      };
    });
})

  </script>
    
<label><input name="name" type="radio"/>один</label>
<label><input name="name" type="radio"/>два</label>
<label><input name="name" type="radio"/>три</label>
<label><input name="name" type="radio"/>четыре</label>



При выборе любой кнопки к ней применяется стиль checkbox-checked и она подсвечивается желтым цветом. Как сделать так, чтобы только к выбранной кнопке применялся стиль checkbox-checked, а с других кнопок сбрасывался? Сейчас получается так, что если пройтись по всем кнопкам, они будут все подсвечены желтым цветом.

destus 03.03.2016 14:41

kos0760,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style type="text/css">
        .checkbox-checked {
            background: #FFCC00;
        }
    </style>
    <script>
     $(document).ready(function () {
         $('label').click(function () {
             $('label').removeClass('checkbox-checked');
             $(this).addClass('checkbox-checked');
         });
     });
    </script>
    <label><input name="name" type="radio" />один</label>
    <label><input name="name" type="radio" />два</label>
    <label><input name="name" type="radio" />три</label>
    <label><input name="name" type="radio" />четыре</label>

kos0760 03.03.2016 14:48

Цитата:

Сообщение от destus (Сообщение 409821)
kos0760,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style type="text/css">
        .checkbox-checked {
            background: #FFCC00;
        }
    </style>
    <script>
     $(document).ready(function () {
         $('label').click(function () {
             $('label').removeClass('checkbox-checked');
             $(this).addClass('checkbox-checked');
         });
     });
    </script>
    <label><input name="name" type="radio" />один</label>
    <label><input name="name" type="radio" />два</label>
    <label><input name="name" type="radio" />три</label>
    <label><input name="name" type="radio" />четыре</label>

Невероятно! Так просто! Но походу не для моих мозгов. Спасибо большое! Уже применил на сайте.


Часовой пояс GMT +3, время: 14:04.