根据多个复选框切换 div 可见性

Posted 2023-02-25

【中文标题】根据多个复选框切换 div 可见性

【英文标题】：Toggle div visibility based on multiple checkboxes

【发布时间】：2011-11-10 12:58:44

【问题描述】：

我有多个复选框。检查其中任何一个都会使 div 可见。不选中它们将隐藏 div。它几乎可以工作，感谢 Nick (http://***.com/questions/4337378/toggle-div-based-on-checkbox-value)，除了我想要多个复选框来切换 div。

html：

<div id="somediv">
<input type="checkbox" class="form-checkbox" value="a" name="a">
<input type="checkbox" class="form-checkbox" value="b" name="b">
<input type="checkbox" class="form-checkbox" value="c" name="c">
<input type="checkbox" class="form-checkbox" value="d" name="d">
</div>

<div id="tog">tog content</div>

jQuery:

        var tog = $("#tog").hide();
        $('#somediv .form-checkbox').change(function()               
          if ($(tog).css('display') == 'none') 
            tog.show();
                 
        );

另一个：

        var tog = $("#tog").hide();
        $('#somediv .form-checkbox').change(function ()                 
            $(tog).toggle(this.checked);
        ).change();

我错过了什么？ 问题是当取消选中其中一个（不是全部）时会隐藏 div。 要求只有在没有选中时才隐藏。并且默认隐藏。 如果有任何被选中，那么保持它可见，不要切换。

任何提示将不胜感激。 谢谢

【参考方案1】：

试试 -

var tog = $("#tog").hide();
 $('#somediv .form-checkbox').change(function ()                 
   $(tog).toggle($('.form-checkbox:checked').length > 0);
 ).change();

演示 - http://jsfiddle.net/VA4NP/

这与您的第二个代码示例非常相似。它使用$('.form-checkbox:checked').length > 0 作为传递给切换函数的参数，如果选中任何复选框，它应该返回true。

【讨论】：

+1。使用 :checked 选择器然后检查长度是一个非常优雅的解决方案。循环遍历每个复选框并测试它们的 checked 属性是另一种方法，但它需要的代码比这更多。

【参考方案2】：

试试这个：

var tog = $("#tog").hide();
$('#somediv').change(function()
    if($('#somediv').find('input:checked').length === 0)
    
        tog.hide();
    
    else
    
        tog.show();
    
);

这里有两点需要注意。首先，您可以使用$(this).find 而不是重新运行选择器。在这种情况下，我不是 100% 确定 this 指向什么（div 或复选框）。其次，如果你有一个容器，里面装满了你想要订阅事件的输入，那么将监听器附加到父对象会更有效。复选框的更改事件将冒泡到 div。

【讨论】：

这也有效，除了 var tog = $("#tog").hide();应该放在事件之外。非常感谢。我学到了很多

【参考方案3】：

你是对的，你很接近。您的更改事件所做的只是考虑选中或未选中的复选框的选中状态。因此，在更改事件中，您只需要查看是否选中了任何复选框。

可能是这样的：

var tog = $("#tog").hide();
$('#somediv .form-checkbox').change(function ()   
    if($('#somediv .form-checkbox').is(':checked').length > 0)
    
        $(tog).show();
    
    else
    
        $(tog).hide();
    
).change();

【参考方案4】：

尝试类似：

    var tog = $("#tog").hide();
    $('#somediv .form-checkbox').change(function() 
      if ($('#somediv .form-checkbox').is(':checked').length > 0) 
        tog.show();
       else 
        tog.hide();
      
    );

【讨论】：

非虚拟机。 @ipr101 得到了更好的解决方案。