Показать сообщение отдельно
  #1 (permalink)  
Старый 03.03.2016, 14:28
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 42

Кастомизация 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, а с других кнопок сбрасывался? Сейчас получается так, что если пройтись по всем кнопкам, они будут все подсвечены желтым цветом.

Последний раз редактировалось kos0760, 03.03.2016 в 16:45. Причина: Переоформление сообщения
Ответить с цитированием