在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中使用單選按鈕切換類

回答

相關問題