Question

我有一个多个复选框。检查它们中的任何一个都会使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时。只有在没有选中时才要求，然后隐藏。并默认隐藏。如果选中任何一个，那么保持可见，不要切换。

任何暗示都会非常感激。感谢

Answer 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作为传递给toggle函数的参数，如果选中任何复选框，则返回true。

Answer 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。

Answer 3

你是对的，你很亲近。您的更改事件正在执行的操作仅考虑已选中或未选中的复选框的已检查状态。因此，在更改事件中，您只需要查看是否已选中任何复选框。

也许是这样的：

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

Answer 4

尝试使用以下内容：

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

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

4 个答案: