Форум

face2005 · #1 (**permalink**) 25.03.2020, 18:32

Приветствую!
есть такая конструкция (переписать не могу, так бы через 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');
}

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

рони · #2 (**permalink**) 25.03.2020, 19:15

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>

face2005 · #3 (**permalink**) 25.03.2020, 19:22

круто! спасибо!

рони · #4 (**permalink**) 25.03.2020, 19:54

face2005,
при условии что label не содержит атрибут class!!!

рони · #5 (**permalink**) 25.03.2020, 20:33

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>

Форум

Справочник

Discord чат

Курсы javascript