Question

例如，我有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'的无线电时，我想要将'dark'替换为'light'。

这就是我现在所拥有的全部

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

Answer 1

您可以使用$('.tabs').removeClass().addClass('tabs '+inputVal);添加课程。

Answer 2

看看它removeClass()和addClass()

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

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

5 个答案: