JQuery add / remove css class on selected radio

Question

I read a few solutions here, but my problem is quite different when they won't work. Basically, if the switch is set, add the css class to the parent div. If no radio is checked, remove the css class. Does that sound simple?

I have several groups of radio buttons, so in other words, multiple radio buttons will be displayed at the same time. Each group of radio buttons is also located on different parts of the page, separated by another html.

Here is what I came up with:

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

I think I'm on the right path with the input: not (: checked), but on the next line it removes style1 from all div elements, and does not check if the child switch of the divs switch is checked.

I assume that I am asking how to write a script so that when you click the switch add the css class to the parent element and then find all the div tags on the page with the child input element. If the child input divs is not set, remove the css class. Therefore, if the div has a child input element and it is checked, do not remove the css class from the div inputs.

Hope this makes sense.

Answer 1

Why not use the following: http://jsfiddle.net/Q2bzT/

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

Answer 2

Assuming your radio buttons use the name property to group them correctly, when you change, you can find radio stations of the same name and delete the class, and then add the class to the one that was activated.

Try: http://jsfiddle.net/U2AAQ/

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

Answer 3

I had a similar problem, but I needed to target the label radio button instead of the parent div element. I also needed to make sure that the other related label elements did not have a class.

Here is what I came up with based on @ user113716 answer:

HTML

MVC code is removed, so there is only HTML in this example

 <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/

Just optimize if you need to.