Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.03.2020, 17:32
Кандидат Javascript-наук
Отправить личное сообщение для face2005 Посмотреть профиль Найти все сообщения от face2005
 
Регистрация: 04.04.2014
Сообщений: 103

добавить класс label при выборе input radio
Приветствую!
есть такая конструкция (переписать не могу, так бы через css сделал)
<div class="gender">
			<label><input type="radio" class="wc-pao-addon-field" name="addon-122" value="muzhskaya" required="" data-label="Мужская">Мужская</label>
			<label><input type="radio" class="wc-pao-addon-field" name="addon-122"  value="zhenskaya" required="" data-label="Женская">Женская</label>
</div>

подскажите как добавить класс для label при выборе input ?

$('input').click(function(){
	$(this).closest("label").addClass('valid');
}


что-то не пашет

Последний раз редактировалось face2005, 25.03.2020 в 18:10.
Ответить с цитированием
  #2 (permalink)  
Старый 25.03.2020, 18:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,079

face2005,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active{
      background-color: #000080;
      color: #FFFFFF;
       padding: 5px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $('.gender').on('change', function() {
    $('label', this).toggleClass(function() {
    return $('input', this).prop('checked') && 'active'
})
})
});
  </script>
</head>
<body>
<div class="gender">
			<label><input type="radio" class="wc-pao-addon-field" name="addon-122" value="muzhskaya" required="" data-label="Мужская">Мужская</label>
			<label><input type="radio" class="wc-pao-addon-field" name="addon-122"  value="zhenskaya" required="" data-label="Женская">Женская</label>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 25.03.2020, 18:22
Кандидат Javascript-наук
Отправить личное сообщение для face2005 Посмотреть профиль Найти все сообщения от face2005
 
Регистрация: 04.04.2014
Сообщений: 103

круто! спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 25.03.2020, 18:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,079

face2005,
при условии что label не содержит атрибут class!!!
Ответить с цитированием
  #5 (permalink)  
Старый 25.03.2020, 19:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,079

face2005,
более универсальный вариант
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .fun.active{
      background-color: #000080;
      color: #FFFFFF;
      padding: 5px;
  }
  .fun{
      background-color: #FF00FF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.gender').on('change', function() {
    $('label', this).each(function(i, label) {
    $(label).toggleClass('active', $('input', this).prop('checked'))
});
});
});
  </script>
</head>
<body>
<div class="gender">
			<label class="fun"><input type="radio" class="wc-pao-addon-field" name="addon-122" value="muzhskaya" required="" data-label="Мужская">Мужская</label>
			<label class="fun"><input type="radio" class="wc-pao-addon-field" name="addon-122"  value="zhenskaya" required="" data-label="Женская">Женская</label>
</div>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить класс при удержание нажатия на элемент ethereal Элементы интерфейса 1 05.08.2019 05:15
Новый input при выборе определенного option SLameN Элементы интерфейса 4 03.07.2015 16:29
Событие при выборе элемента из выпадающего списка в input type="email" Алексей Горохов Events/DOM/Window 4 27.12.2013 08:38
Открытие полей формы при выборе определенного radio gvelisperi Internet Explorer 2 15.12.2013 01:32
выполнение ф-ии при изменении состояния radio MaxB Events/DOM/Window 5 24.06.2009 13:24