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获取非“全部”的所有单选按钮，使用选择子句：not（选中），如果length = 0，则取消选中All radiobutton。

没有给出代码，因为你没有发布你的代码的html部分，加上......我们不想从你自己做到这一点的乐趣！

Answer 3

您需要编写一个函数来计算选中“关闭”的单选按钮的数量。如果全部关闭，请选中“全部关闭”选项。

更简单且可能更直观的选项可能是将“全部打开”和“全部关闭”选项更改为按钮。这使得它成为一次性操作，可以根据需要切换状态，并且当用户更改其他内容时，您无需担心可视地更新它们。这也可以防止发生以下情况：

用户点击“全部开启”
用户点击选项3的“关闭”

您的代码现在仍然会选中“All On”电台，这令人困惑。它应该一起删除所有选择，不选择“全部打开”或“全部关闭”。这只是增加了代码复杂性，在那里您可以简单地将它们更改为按钮并完成。

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);
    }
});

将单选按钮组切换在一起

4 个答案: