javascript - 在 jQuery 中使用单选按钮切换类

Question

我有一组单选按钮，当我点击一个单选按钮时，我希望标签改变颜色或其他任何东西。但是当我点击另一个单选按钮时，颜色消失了。因此我有这样的东西:

jQuery('label').mouseup(function(){
   jQuery(this).prev().attr('checked', 'checked');
   jQuery('input').next().removeClass('selected');
   jQuery('input:checked').next().addClass('selected');

});

如果你需要看一些html:

<input type="radio" id="radio1" name="myRadio" value="option-1" />
<label for="radio1">Label 1</label>


<input type="radio" id="radio2" name="myRadio" value="option-2" />
<label for="radio2">Label 2</label>

这首先从所有标签中删除“选定”类，然后仅重新应用于选中的标签。

它有效且简单，但我认为这可能不是最有效的方法。我想 javascript 正在遍历每个输入元素并使用比必要更多的资源。

我很好奇是否有人知道更有效地执行此操作的通用方法。我似乎经常在我的 jQuery 代码中做这种事情。顺便说一句，过去 3 个月左右我一直在使用 jQuery。

Answer 1

我认为有几件事值得一提。

点击 <label>将自动更改 <input> 的值.您不需要设置 checked attr 手动，因此可以绑定(bind)到 change而是 radio 上的事件。这也将允许键盘事件选择/取消选择 radio ，并且在 radio 值发生变化时起作用，而不仅仅是当有人将鼠标悬停在标签上时。

此外，您可以将整个 radio 输入集合保存在它自己的变量中，以便以后引用它们时不必再次搜索 DOM。

建议代码(带 jsfiddle preview )

var $radios = jQuery('input[type=radio]');
$radios.change(function() {
   $radios.next().removeClass('selected');
   $radios.filter(':checked').next().addClass('selected');
});