切換組一起

Question

我有一組單選按鈕我的網頁上是這樣的：

 
ALL  (x) On () Off 
OPTION 1 (x) On () Off 
OPTION 2 (x) On () Off 
OPTION 3 (x) On () Off 
OPTION 4 (x) On () Off 

當您檢查開或關單選按鈕，「所有」，它設置的所有其他單選按鈕相同的設置：

 
var autoPostAllOn = $('#auto-post-all-on'); 
var autoPostAllOff = $('#auto-post-all-off'); 
var fbPostToggleOn = $('.fb-post-toggle-on'); 
var fbPostToggleOff = $('.fb-post-toggle-off'); 

$(autoPostAllOn).click(function(){ 
    $(fbPostToggleOn).attr('checked', 'checked'); 
}); 
$(autoPostAllOff).click(function(){ 
    $(fbPostToggleOff).attr('checked', 'checked'); 
}); 

不過，我也希望做相反的：例如，如果用戶手動檢查全部關閉按鈕，自動檢查關按鈕「全部」過。我會如何去做這件事？

Answer 1

如果你正在使用jQuery 1.6或更高版本，可以使用.prop

$(function(){ 
    $("input.allon").change(function(){ 
     $("input.on").prop("checked", true); 
    }); 

    $("input.alloff").change(function(){ 
     $("input.off").prop("checked", true); 
    }); 

    $("input.on, input.off").change(function(){ 
     $("input.allon").prop("checked", 
      ($("input.on").length == $("input.on:checked").length)); 
     $("input.alloff").prop("checked", 
      ($("input.off").length == $("input.off:checked").length)); 
    }); 
}); 

見例如：jsfiddle

Answer 2

您可以使用jQuery獲取不是「全部」的所有單選按鈕，並使用selection子句：not（checked），如果length = 0，則取消選中所有單選按鈕。

沒有指定的，因爲你沒有發佈您的代碼的HTML部分代碼，再加上......我們不希望把自己從你做它的樂趣！

Answer 3

您需要編寫一個函數來計算單選按鈕的數量，選中「關」。如果全部關閉，請檢查「全部關閉」選項。

一個更簡單和可能更直觀的選擇可能是將「All on」和「All off」選項更改爲按鈕。這使它成爲一次性操作，根據需要切換狀態，而且當用戶更改其他內容時，您不必擔心可以更新它們。這也可避免以下情況的發生：

• 用戶點擊「全部打開」
• 用戶點擊「關閉」選項3

現在您的代碼仍然保留「所有關於」廣播仍然被選中，這是令人困惑的。它應該一起刪除選擇，不會選擇「全部打開」或「全部關閉」。這隻會增加代碼的複雜性，因爲您可以簡單地將它們更改爲按鈕並完成。

Answer 4

類似下面應該做的伎倆，

DEMO

var autoPostAllOn = $('#auto-post-all-on'); 
var autoPostAllOff = $('#auto-post-all-off'); 
var fbPostToggleOn = $('.fb-post-toggle-on'); 
var fbPostToggleOff = $('.fb-post-toggle-off'); 

autoPostAllOn.change(function() {  
    fbPostToggleOn.prop('checked', true); 
}); 
$(autoPostAllOff).change(function() { 
    fbPostToggleOff.prop('checked', true); 
}); 

fbPostToggleOn.change (function() { 
    var isChecked = true; 
    autoPostAllOff.prop('checked', false); 

    fbPostToggleOn.each (function() { 
     isChecked = isChecked && this.checked; 
    }); 

    if (isChecked) { 
     autoPostAllOn.prop('checked', true); 
    } 
}); 
fbPostToggleOff.change (function() { 
    var isChecked = true; 
    autoPostAllOn.prop('checked', false); 

    fbPostToggleOff.each (function() { 
     isChecked = isChecked && this.checked; 
    }); 

    if (isChecked) { 
     autoPostAllOff.prop('checked', true); 
    } 
});