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

我有一组单选按钮，当我单击一个单选按钮时，我希望标签可以更改颜色或其他内容。但是当我点击另一个单选按钮时，颜色就会消失。因此，我有这样的事情：在jQuery中使用单选按钮切换类

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。

来源

2010-05-20 dardub

在我看来，你的代码是好的。我会以同样的方式做。 – Rbacarin 2010-05-20 19:00:32

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

点击<label>将自动更改<input>的值。您无需手动设置attr 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'); 
});

来源

2010-05-20 19:04:16 gnarf

请注意，如果您动态添加任何单选按钮，则不会选取它们，因为它在第一次计算引用后会存储引用。这可能不是问题，但它是需要注意的。 – tvanfosson 2010-05-20 19:11:41

@tvanfosson - 非常真实 - 如果我们想要处理动态无线电，我会假设OP会在原来使用'.live（）'。 – gnarf 2010-05-20 19:15:52

我只把选中的attr放入，否则它会将类添加到先前选择的无线标签。我没有意识到更改事件。 – dardub 2010-05-20 19:39:08

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

我想用click或change。

来源

2010-05-20 19:02:30

使用变化 - 通过空格键选择收音机的人（像我这样）仍然会得到你的事件 – gnarf 2010-05-20 19:04:03

好的想法;）我编辑了我的答案，因为mouseup在这种情况下不好。 – 2010-05-20 19:06:59

是的，我通常使用点击，但我试图用鼠标去尝试别的东西，并将它留在那里。在这种情况下，我没有看到点击和鼠标悬停之间的区别。但我会看看变化。 – dardub 2010-05-20 19:35:26

实际上，它看起来像它单击标签时的作品。只要性能不错，我不会过多地关心搜索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处理程序，如果你动态地添加电台页面。

来源

2010-05-20 19:07:00 tvanfosson

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

回答

相关问题