使用无线电输入切换附加类答案

【问题标题】：Toggle an appended class with radio inputs使用无线电输入切换附加类
【发布时间】：2013-10-23 13:15:26
【问题描述】：

例如，我有 2 个单选按钮，我想在第一次选择单选按钮时将一个类附加到现有的类，然后通过单击另一个单选输入来切换新附加的类，而不替换原来的类被替换：

<input type="radio" name="color" checked="checked" value="light" />
<input type="radio" name="color" value="dark" />

<div class="tabs">
    ...
</div>

在检查值为“dark”的收音机时，我想使用 .val() 作为附加到“.tabs”的类名，并且当依次检查值为“light”的收音机时，我想用“光”替换“黑暗”。

这就是我现在所拥有的一切

        $(document).ready(function () {
            $('input').change(function () {
                var inputVal = $("input:radio:checked").val();
                $('.tabs').append().attr('class',inputVal);
            });
        });

【问题讨论】：

所以您想在单击单选按钮时向.tabs 添加一个类？

标签： jquery html radio-button toggle

【解决方案1】：

您可以使用$('.tabs').removeClass().addClass('tabs '+inputVal); 添加一个类。

【讨论】：

【解决方案2】：

看看removeClass()和addClass()

 $(document).ready(function () {
            $('input').change(function () {
                var inputVal = $("input:radio:checked").val();
                $('.tabs').removeClass().addClass('tabs '+inputVal);
            });
        });

【讨论】：

【解决方案3】：

$(document).ready(function () {
    var $radioColor = $('input:radio[name=color]');
    $('.tabs').addClass($radioColor.val());

    $radioColor.on('change.changeClass', function() {
        $('.tabs').toggleClass('dark light');
    });
});

【讨论】：

【解决方案4】：

jsFiddle DEMO

use `.addClass()` and `.removeClass()` along with `.on()`.

 $(document).ready(function () {
            $('input').on('change',function () {
                var inputVal = $("input:radio:checked").val();
                $('.tabs').removeClass().addClass('tabs'+inputVal);
            });
        });

【讨论】：

【解决方案5】：

.attr() 将删除所有类并设置新类。然后，您可以将 .tabs 类附加到元素。

$(document).ready(function () {
   $('input').change(function () {
      var inputVal = $("input:radio:checked").val();
      $('.tabs').attr('class',inputVal).addClass('tabs');
   });
});

【讨论】：