Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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. Причина: Переоформление сообщения
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2016, 14:41
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

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>
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2016, 14:48
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 42

Сообщение от destus Посмотреть сообщение
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>
Невероятно! Так просто! Но походу не для моих мозгов. Спасибо большое! Уже применил на сайте.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить radio button через изображение Jeick9 Events/DOM/Window 1 10.03.2015 05:57
Что делаю не так? Javascript + Radio button + Input dmonco Элементы интерфейса 3 19.05.2012 16:22
Получение значения из двух групп radio button kristalmen Элементы интерфейса 2 21.11.2011 23:13
Проблема radio button с кроссбраузерностью shkarbatov Javascript под браузер 0 28.07.2011 10:55
Помогите с radio button. Не стандартное решение dreckin Элементы интерфейса 15 01.05.2010 22:20