使用屬性選中和取消選中處理2組單選按鈕

我正在開發一個移動應用程序，並且在jQuery中有一個單擊函數，它將一個類應用於一組單選按鈕，並從該頁上的其他單選按鈕中刪除該類。我現在有了使用案例，我有兩組單選按鈕，現在它可以刪除所有單選按鈕，而不僅僅是當前組中的單選按鈕。使用屬性選中和取消選中處理2組單選按鈕

我已經在JSFiddle上設置了一個演示，其中有兩組單選按鈕，您可以看到它們似乎以某種方式被連接，並且我想保留它們的包容性。如果您有任何問題，請隨時提出，希望這會讓您有所收穫。

JSFiddle Code

這裏是jQuery代碼，檢查出的jsfiddle休息。

來源

2012-02-29 jsheffers

我不完全得到的問題是什麼？你可以重新提出/突出你的問題嗎？ – gideon 2012-02-29 03:51:32

你需要做的是，如果收音機是相關的，只使用'name =「group []」'和過濾'class = checked'。 – elclanrs 2012-02-29 03:52:33

$(".form-radios label").click(function(){ 
     $(this).attr('checked', 'checked').addClass('checked') 
       .siblings('label').removeClass('checked'); 
});

siblings將只得到共享相同的父元素的元素。

http://jsfiddle.net/qxV9c/2/

編輯：隨着新的結構：

$(".form-radios label").click(function(){ 
    var $this = $(this); 

    $this.closest(".form-radios").find("label").removeClass('checked'); 
    $this.attr('checked', 'checked').addClass('checked'); 
});

http://jsfiddle.net/qxV9c/5/

來源

2012-02-29 03:52:47

我看到你有兄弟姐妹在一條新線上分解。這是什麼目的？我看到在JSFiddle中工作的例子，但我無法在我的用例中使用它。基本上它是添加選中的類，但不會從其他類中刪除它。 – jsheffers 2012-02-29 04:05:40

這只是爲了可讀性。您的真實html結構是否與您發佈的結構相匹配？ – 2012-02-29 04:13:52

對不起，我沒有留下包含div。 http://jsfiddle.net/qxV9c/4/更新了HTML和你的JS – jsheffers 2012-02-29 04:17:36

只要找到最接近的父元素，而不是搜索無處不在：

$('.form-radios label').click(function() { 
     var $this = $(this); 

     $this.next('input').prop('checked', 'checked'); // Took the liberty of fixing this up, too. 
     $this.addClass('checked'); 
     $this.closest('.form-radios').find('label').not(this).removeClass('checked'); 
});

來源

2012-02-29 03:52:42 Ryan

他還需要使用name屬性對無線電進行分組。 – 2012-02-29 03:56:24

這不僅適用於jQuery 1.6+嗎？我在1.3.2 – jsheffers 2012-02-29 04:09:17

@jsheffers：不，在。1.3中添加'.closest（）'。（[文檔]（http://api.jquery.com/closest/））至於'prop'，只需將它更改爲'attr'就像你原來的 - 或升級:) – Ryan 2012-02-29 04:10:48

使用屬性選中和取消選中處理2組單選按鈕

回答

相關問題