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，因此可以绑定到无线电上的change事件。这也将允许键盘事件选择/取消选择无线电，并且无论何时有人将鼠标悬停在标签上，都可以随时更改无线电值。

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

建议代码（w / jsfiddle preview）

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

Answer 2

除了使用在这种情况下似乎有点不寻常的mouseup（至少对我来说），你的代码还可以。

我会使用click或change。

Answer 3

单击标签时看起来确实有效。只要性能良好，我就不会过多担心搜索到的DOM元素的数量。当问题成为问题而不是之前进行优化。清晰度/可读性可能更重要。但是，您可以通过使用标签或其相关输入中的一些信息来缩小选择器，从而改进它。使用end和filter也可以让您重复使用第二个查询。

$('label').click(function(){
   var radio = $(this).prev();
   radio.attr('checked', 'checked'); 
   var name = radio.attr('name');
   $('input[name=' + name ']').next()
                              .removeClass('selected')
                              .end()
                              .filter(':checked')
                              .next()
                              .addClass('selected'); 

});

请注意，在实际的无线电上使用change，正如其他人建议的那样可能更好。您可以使用相同的技术。

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

如果要向页面动态添加无线电，请使用live处理程序。

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

3 个答案: