jquery - 使用jquery根据选择状态设置表单标签的样式？

Question

我有一个带有单选按钮的表单，如

<label for="challenge" class="fat">Challenge 
    <input type="radio" name="create-what" value="challenge" id="challenge">
</label>
<label for="team" class="fat">Team 
    <input type="radio" name="create-what" value="team" id="team">
</label>

显然，单击标签会选择收音机。我还需要做的是根据单选按钮的选定状态更改标签的类。因此，将“活动”类添加到所选收音机的标签，如果未选择收音机，则将其删除。

我有很多这样的鞋，所以我一直在寻找最便携的方式。谢谢。

Answer 1

change在 jQuery 中通过监视事件并根据checked状态切换类非常简单

$('input:radio').change(function(){

     $(this).parent().toggleClass('active', this.checked).siblings().removeClass('active');
});

toggleClass允许布尔值作为第二个参数来确定是添加还是删除。this.checked要么是真，要么是假；

如果您还需要在页面加载时运行它，只需触发change页面加载时：

$('input:radio').change(function(){

     $(this).parent().toggleClass('active', this.checked).siblings().removeClass('active');
}).change();