jquery - jQuery单选按钮更改跨度类

Question

我正在尝试使用 jQuery 根据无线电检查（JSFiddle）更改跨度类。我已经从第一个跨度中删除了该类-但无法将其添加到下一个跨度中。我很确定有一个简单的解决方案 - 但对于我的生活，我很难过......

目前使用：

$(document).ready(function(){
$('input:radio').change(function(){
    $('span.StatusBox').removeClass('active');
    $(this).closest('span.StatusBox').addClass('active');
});

});

谢谢

Answer 1

可以通过添加一个data attribute来解决span。

HTML：

<span class="StatusBox yes active" data-value="1">Yes</span>
<span class="StatusBox no" data-value="0">No</span>

YES<input type="radio" name="tickets_active" value="1"checked=""><br>
NO<input type="radio" name="tickets_active" value="0">

JS：

$(document).ready(function(){
    $('input:radio').change(function(){
        $('span.StatusBox')
             .removeClass('active')
             .filter('[data-value=' + $(this).val() + ']').addClass('active');
    });
});

jsFiddle Demo