jQuery add/remove css class on selected radio

前端 未结 4 721
夕颜
夕颜 2021-01-05 15:33

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

相关标签:
4条回答
  • 2021-01-05 16:01

    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");
        });    
    });​
    
    0 讨论(0)
  • 2021-01-05 16:02

    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');
    });
    
    0 讨论(0)
  • 2021-01-05 16:17

    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.

    0 讨论(0)
  • 2021-01-05 16:18

    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');
        });
    });​
    
    0 讨论(0)
提交回复
热议问题