Question

我在表单中有多个复选框。基于单击这些复选框，我显示div部分。但如果我取消选中一个复选框，则该div部分会被隐藏。如果未选中所有复选框，如何确保隐藏div部分。粗略的方法是编写我自己的'display'方法，该方法将检查是否所有复选框都未选中，然后隐藏div部分。任何更简单的解决方案??

Answer 1

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();
        }
    });
});

Answer 2

如果选中了一个或多个复选框，则以下代码将显示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中。 E.g。

<强>的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.

Answer 3

不是真的，你需要这个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>

Answer 4

我创建了一个函数，该函数使用一个跟踪所选复选框数量的变量：

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不在全局命名空间中。

Answer 5

普通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更简洁，但有点冗长从不伤害任何人。

Answer 6

function toggleCheckbox(id) {
            if ($("input[id=" + id + "]").is(':checked')) {
                $( "#"+id ).prop( "checked", false );
            } else {
                $( "#"+id ).prop( "checked", true );
            }
        }

只需传递您的复选框的ID

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

6 个答案: