隐藏基于取消选中复选框的div

我在表单中有多个复选框。基于点击这些复选框，我显示一个div部分。但是，如果我取消选中一个复选框，该div部分将被隐藏。如何确保div部分仅在未选中所有复选框时才隐藏。粗糙的方式可以写我自己的'显示'方法，它将检查是否所有复选框都未选中，然后隐藏div部分。更简单的解决方案隐藏基于取消选中复选框的div

来源

2010-07-20 yogsma

的以下代码将显示div是否已选中一个或多个复选框：

的jQuery

版本1：

$("input[name='mycheckboxes']").change(function() { 
    $("#showme").toggle($("input[name='mycheckboxes']:checked").length>0); 
});

2版（更有效）：

var MyCheckboxes=$("input[name='mycheckboxes']"); 

MyCheckboxes.change(function() { 
    $("#showme").toggle(MyCheckboxes.is(":checked")); 
});

HTML

<input type="checkbox" name="mycheckboxes" /> 
<input type="checkbox" name="mycheckboxes" /> 
<input type="checkbox" name="mycheckboxes" /> 
<input type="checkbox" name="mycheckboxes" /> 

<div id="showme" style="display: none">Show me</div>

Code in action (Version 1).

Code in action (Version 2).

--- 不同复选框名称版 ---

对于不同的命名复选框，将它们包装在一个DIV与标识符。例如。

jQuery的

var MyCheckboxes=$("#checkboxgroup :checkbox"); 

MyCheckboxes.change(function() { 
    $("#showme").toggle(MyCheckboxes.is(":checked")); 
});

HTML

<div id="checkboxgroup"> 
    <input type="checkbox" name="mycheckbox1" /> 
    <input type="checkbox" name="mycheckbox2" /> 
    <input type="checkbox" name="mycheckbox3" /> 
    <input type="checkbox" name="mycheckbox4" /> 
</div> 

<div id="showme" style="display: none">Show me</div>

这code in action.

来源

2010-07-20 18:05:55

切换是一个很好的触摸，但如果你可以给你的复选框提供类并缓存你的查询，它比查询名称更有效率（更不用说他可能需要它们是不同的名称，否则它们可能是无线电） – 2010-07-20 18:10:35

没有理由为此使用类。这里的名字是常用的选择器。 – 2010-07-20 18:20:53

版本2是缓存版本。感谢您的建议。 – 2010-07-20 18:29:46

不是真的，你需要使用Javascript这一个...也许...比方说：

<html> 
<head> 
<style type="text/css"> 
    #input_container > input + input + input + div {display:none} 
    #input_container > input:checked + input:checked + input:checked + div {display:block} 
</style> 
</head> 
<div id="input_container"> 
    <input type="checkbox">blah1 
    <input type="checkbox">blah2 
    <input type="checkbox">blah3 
    <div>To show/hide</div> 
</div> 
</body> 
</html>

来源

2010-07-20 17:53:50

我只使用javascript！ – yogsma 2010-07-20 17:54:20

这更简单，只是普通的CSS/HTML，虽然我没有测试过这个。 – 2010-07-20 17:59:29

刚刚测试过它，它可以工作（在FF中）。 – 2010-07-20 18:01:33

HTML：

<input type="checkbox" class="group" name="check1"> 
<input type="checkbox" class="group" name="check2"> 
<input type="checkbox" class="group" name="check3"> 
<input type="checkbox" class="group" name="check4">

的jQuery：

$(function() { 
    var $checks = $('input:checkbox.group'); 
    $checks.click(function() { 
     if($checks.filter(':checked').length == 0) { 
      $('#div').hide(); 
     } else { 
      $('#div').show(); 
     } 
    }); 
});

来源

2010-07-20 17:55:39

可能最好使用change（）处理程序而不是单击。 – 2010-07-20 17:57:18

现在是jQuery的假设吗？因为它没有在原来的问题中提到... – Bob 2010-07-20 18:01:19

哈，牺牲了我的假设。我可以发誓我看到了一个jQuery标签。无论如何，我不想尝试拼凑一个例子来说明如何使用普通的javascript进行操作，所以我会在这里留下这个，以防他正在使用/愿意使用jQuery。 – 2010-07-20 18:04:28

我想创建一个使用跟踪检查复选框的数量变量的函数：

var numberOfChecks = 0; 
function display(ev) { 
    var e = ev||window.event; 
    if (this.checked) { 
    numberOfChecks++; 
    } else { 
    numberOfChecks--; 
    } 
    if (!numberOfChecks) { 
    //hide div code 
    } else { 
    //display div code 
    } 
}

对每个复选框使用该函数用于每个onClick事件。在理想的情况下，这将在一些初始化函数内完成，因此numberOfChecks和display不在全局名称空间中。

来源

2010-07-20 18:25:39 Bob

普通的JavaScript：

HTML

<div id="checkboxes"> 
<input type="checkbox" name="check1"> 
<input type="checkbox" name="check2"> 
<input type="checkbox" name="check3"> 
<input type="checkbox" name="check4"> 
</div> 

<div id="hiddendiv"><!-- more stuff --></div>

的Javascript

(function() { //Create clousre to hide the checked variable 
var checked = 0; 
var inputs = document.getElementById('checkboxes').getElementsByTagName('input'); 
for (var i=0, l=inputs.length; i<l; i++) { 
    if (inputs[i].type == 'checkbox') { 
    if (inputs[i].checked) checked++; //Count checkboxes that might be checked on page load 
    inputs[i].onchange = function() { 
     checked += this.checked ? 1 : -1; 

     var hiddendiv = document.getElementById('hiddendiv'); 
     if (!checked) hiddendiv.style.display = "none"; 
     else hiddendiv.style.display = ""; 
    }; 
    } 
} 
}());

另一种选择是简单地通过每一个复选框每次change事件是一次迭代而不是依靠计数，这可能更容易出错。很明显，jQuery更简洁，但有点冗长，从不伤害任何人。

来源

2010-07-20 18:31:38 MooGoo

隐藏基于取消选中复选框的div

回答

相关问题