jQuery dodaj/usuń klasę css w wybranym radiu

Question

Przeczytałem kilka rozwiązań tutaj, ale mój problem różni się na tyle, że te nie będą działać. Zasadniczo, jeśli przycisk opcji jest zaznaczony, dodaj klasę css do elementu nadrzędnego. Jeśli radio nie jest zaznaczone, usuń klasę css. Brzmi prosto?

Mam więcej niż jedną grupę przycisków opcji, więc innymi słowy, będzie kilka przycisków wybieranych jednocześnie. Każda grupa przycisków radiowych znajduje się również w różnych częściach strony oddzielonych od innych html.

Oto co wymyśliłem:

$(document).ready(function() { 
    $('input').click(function() { 
     if ($('input:not(:checked)')) { 
      $('div').removeClass('style1'); 
     } 
     if ($('input').is(':checked')) { 
      $(this).parent().addClass('style1'); 
     } 


    }); 
}); 

myślę, że jestem na dobrej drodze z wejściem: not (: zaznaczona), ale w następnym wierszu usuwa style1 ze wszystkich elementów div zamiast sprawdzać, czy jest zaznaczone pole wyboru innego elementu div.

Zgaduję, o co pytam, to jak napisać skrypt, który po kliknięciu przycisku radiowego, dodać klasę css do rodzica, a następnie znaleźć wszystkie znaczniki div na stronie, które mają dziecko danych wejściowych. Jeśli wejście div nie jest zaznaczone, usuń klasę css. Więc jeśli element div ma element podrzędny i jest zaznaczony, nie usuwaj klasy css z danych wejściowych div.

Mam nadzieję, że ma to sens.

Answer 1

Dlaczego nie przy użyciu następujących: http://jsfiddle.net/Q2bzT/

$(document).ready(function() { 
    $('input').click(function() { 
     $('input:not(:checked)').parent().removeClass("style1"); 
     $('input:checked').parent().addClass("style1"); 
    });  
});​ 

Answer 2

Zakładając, że przyciski radiowe wykorzystują właściwość name, aby prawidłowo je grupować, po zmianie można znaleźć radio o tej samej nazwie i usunąć klasę, a następnie dodać klasę do tej, która została aktywowana.

Wypróbuj:http://jsfiddle.net/U2AAQ/

$(document).ready(function() { 
    $(':radio').change(function() { 
     $(':radio[name=' + this.name + ']').parent().removeClass('style1'); 
     $(this).parent().addClass('style1'); 
    }); 
});​ 

Answer 3

miałem podobny problem, ale musiałem kierować przycisk radia label zamiast rodzica Element div. Musiałem również upewnić się, że inne powiązane elementy nie mają klasy.

Oto co wymyśliłem na podstawie użytkownika @ user113716 odpowiedź:

HTML

kod MVC usunięte więc nie tylko HTML w tym przykładzie

<ol class="list-group"> 
    <li class="list-group-item"> 
     <div class="input-group"> 
      <label for="choice_ChoiceId" class="form-control">ChoiceDescription</label> 
      <span class="input-group-addon"> 
       <input type="radio" id="choice_ChoiceId" value="choiceValue" name="choiceName" required /> 
      </span> 
     </div> 
    </li> 
</ol> 

jQuery

$(':radio').click(function() { 
    var _groupName = $(this).attr('name'), 
     _radioId = $(this).attr('id'), 
     _radioGroup = $(':radio[name="' + _groupName + '"]'); 

    //remove class from all labels for this group of radio buttons 
    _radioGroup.each(function(){ 
     $('label[for*="' + $(this).attr('id') + '"]').removeClass('style1'); 
    }); 

    //add the class to the selected radio button 
    $('label[for*="' + _radioId + '"]').addClass('style1'); 
}); 

Answer 4

JavaScript

'use strict'; 
var o = 'label.input-check, label.input-radio'; 
$(o).find('input').change(function() { 
    $(o).find('input').filter('input[name="' + (this).name + '"]').each(function() { 
     $(this).parent(o).toggleClass('checked', (this).checked); 
    }); 
}).trigger('change'); 

Demo:http://jsfiddle.net/3uwp9c2n/

Wystarczy zoptymalizować, jeśli trzeba.