Question

我在这里已经阅读了一些解决方案，但是我的问题在那些不起作用的地方有所不同。基本上，如果选中单选按钮，则将css类添加到父div。如果未选中收音机，请删除css类。听起来很简单？

我有多个单选按钮组，换句话说，一次会选择多个单选按钮。每个单选按钮组也位于由其他html分隔的页面的不同部分。

以下是我提出的建议：

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


    });
});

我认为我在输入的正确路径上：not（：checked），但在下一行它从所有div元素中删除style1，而不是检查是否检查了其他divs单选按钮子项。

我想我要问的是如何编写一个脚本，当单击单选按钮时，将css类添加到父级，然后在页面上找到所有具有输入子级的div标签。如果未选中divs子输入，请删除css类。因此，如果div具有子输入元素并且已经选中，则不要从输入div中删除css类。

我希望这是有道理的。

Answer 1

为什么不使用以下内容：http://jsfiddle.net/Q2bzT/

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

Answer 2

假设您的单选按钮使用name属性对其进行正确分组，当更改时，您可以找到具有相同名称的无线电，并删除该类，然后将该类添加到已激活的类中。

试一试： http://jsfiddle.net/U2AAQ/

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

Answer 3

我遇到了类似问题，但我需要定位单选按钮label而不是父div元素。我还需要确保其他相关的label元素没有该类。

这是我根据@ user113716的答案提出的：

<强> HTML

删除了MVC代码，因此此示例中只有HTML

<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');

演示： http://jsfiddle.net/3uwp9c2n/

如果需要，只需进行优化。

jQuery在选定的广播中添加/删除css类

4 个答案: