0

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

4

6 回答 6

3

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-20T17:55:39.240 回答
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>

实际代码（版本 1）。

实际代码（第 2 版）。

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

对于不同的命名复选框，将它们包装在DIV带有标识符的 a 中。例如

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>

这段代码在起作用。

于 2010-07-20T18:05:55.757 回答
1

不是真的，你需要 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-20T17:53:50.200 回答
1

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

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-20T18:25:39.087 回答
1

纯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-20T18:31:38.903 回答
0 
function toggleCheckbox(id) {
            if ($("input[id=" + id + "]").is(':checked')) {
                $( "#"+id ).prop( "checked", false );
            } else {
                $( "#"+id ).prop( "checked", true );
            }
        }

只需传递您的复选框的 id

于 2020-01-22T06:39:34.330 回答