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

【问题标题】：Toggle div visibility based on multiple checkboxes根据多个复选框切换 div 可见性
【发布时间】：2011-11-10 12:58:44
【问题描述】：

我有多个复选框。检查其中任何一个都会使 div 可见。不选中它们将隐藏 div。它几乎可以工作，感谢 Nick (http://stackoverflow.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。要求只有在没有选中时才隐藏。并且默认隐藏。如果有任何被选中，那么保持它可见，不要切换。

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

【问题讨论】：

标签： jquery

【解决方案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 得到了更好的解决方案。