CODEWITHSUNDEEP
jquery-ui
The Muffin Man
The Muffin Man

Reputation: 20004

jQuery add/remove css class on selected radio

I've read a few solutions on here, but my problem differs enough where those will not work. Basically if the radio button is checked, add a css class to the parent div. If the radio is not checked, remove the css class. Sounds simple?

I have more than one radio button group, so in other words, there will be multiple radio buttons selected at a time. Each radio button group also is on different parts of the page seperated by other 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 instead of checking if other divs radio button child is checked.

I guess what I'm asking is how do I write a script that when a radio button is clicked, add a css class to the parent and then find all div tags on the page that have a child of input. If the divs child input is not checked, remove the css class. So if a div has a child input element and it is checked, don't remove the css class from the inputs div.

I hope that makes sense.

Upvotes: 6

Views: 25310

Answers (4)

João Antonio Trocades
João Antonio Trocades

Reputation: 1

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.

Upvotes: 0

hideki
hideki

Reputation: 1330

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

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

HTML

MVC code 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');
});

Upvotes: 0

nandokakimoto
nandokakimoto

Reputation: 1361

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

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

Upvotes: 20

user113716
user113716

Reputation: 322492

Assuming your radio buttons utilize the name property to properly group them, when one changes, you can find the radios with the same name, and remove the class, then add the class to the one that was activated.

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

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

Upvotes: 9

Related Questions