代码之家 › 专栏 › 技术社区 › yogsma

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

show-hide html javascript

yogsma · 技术社区 · 14 年前

我在一个窗体中有多个复选框。在单击这些复选框的基础上,我显示了一个div部分。但是如果我取消选中一个复选框,div部分就会被隐藏。如何确保只有在取消选中所有复选框时才隐藏div部分。粗略的方法是编写自己的“display”方法,该方法将检查是否所有复选框都未选中,然后隐藏div部分。有更简单的解决办法吗??

5 回复 | 直到 14 年前

Gert Grenander Keiron Lowe 14 年前

如果选中了一个或多个复选框,则以下代码将显示div:

版本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.

Paolo Bergantino 14 年前

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

R. Hill 14 年前

不是真的,你需要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>

Bob 14 年前

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

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

MooGoo 14 年前

<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

Shuvro Akash 5 年前

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

只需传递复选框的id