【发布时间】：2011-03-18 14:18:42
【问题描述】：
我在一个表单中有多个复选框。基于单击这些复选框，我显示了一个 div 部分。但是，如果我取消选中一个复选框，该 div 部分就会被隐藏。仅当所有复选框都未选中时，如何确保隐藏 div 部分。粗略的方法可以是编写我自己的“显示”方法，该方法将检查是否所有复选框都未选中，然后隐藏 div 部分。有更简单的解决方案吗？？
【问题讨论】：
标签： javascript html show-hide
【发布时间】：2011-03-18 14:18:42
【问题描述】：
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();
}
});
});
【讨论】：
-
最好使用 change() 处理程序而不是单击。
-
现在是 jQuery 的假设吗？因为原始问题中没有提到它...
-
哈，听我的假设。我可以发誓我看到了一个 jQuery 标签。无论如何，我不想拼凑一个例子来说明使用纯 JavaScript 需要什么，所以我将把它留在这里，以防他正在使用/愿意使用 jQuery。
-
如果你有相同的名字，就不需要为每个复选框添加一个类。
-
我愿意接受 jquery 的建议。谢谢保罗！！
如果选中一个或多个复选框，以下代码将显示 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>
--- 不同的复选框名称版本 ---
对于不同的命名复选框，将它们包装在带有标识符的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>
【讨论】：
-
toggle 是一个不错的选择，但是如果您可以为复选框提供类并缓存您的查询，它比按名称查询更有效（更不用说他可能需要它们是不同的名称，否则它们可能是收音机）
-
没有理由为此使用类。名称是这里常用的选择器。
-
版本 2 是缓存版本。感谢您的建议。
-
如何使用不同的复选框名称来做到这一点？
-
@yogsma - 请参阅上文，了解适用于不同名称的解决方案。
不是真的，你需要 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>
【讨论】：
-
这更简单，就是纯 CSS/HTML，虽然我承认我没有测试过。
-
这将在多少个浏览器上工作？ + 不能在 IE6 上工作， :checked 不能在 IE7 上工作
-
是的。我鄙视 IE :-) 但如果不介意旧版浏览器（有时会发生），该解决方案仍然是有效的解决方案
-
很公平。如果所有这些都被选中，这不会也只显示 div 吗？
我将创建一个函数，该函数使用一个变量来跟踪选中的复选框的数量：
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 就不会在全局命名空间中。
【讨论】：
纯 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 更简洁，但一点冗长也不会伤害任何人。
【讨论】：
function toggleCheckbox(id) {
if ($("input[id=" + id + "]").is(':checked')) {
$( "#"+id ).prop( "checked", false );
} else {
$( "#"+id ).prop( "checked", true );
}
}
只需传递复选框的 id
【讨论】：