使用 jquery 隐藏或显示多个 div答案

【问题标题】：Using jquery to hide or show multiple divs使用 jquery 隐藏或显示多个 div
【发布时间】：2012-06-02 03:03:05
【问题描述】：

我有一个常见的问题，但有一个独特的转折。我有一个复选框列表。对于每个复选框，我想隐藏/显示一个或多个 div。像这样 - 如果我选中复选框 1，则会显示 div 1。如果我选中复选框 2，则会显示 div 2。如果我选中复选框 3，则会显示 div 1 和 2。这是扭曲，如果我选择复选框 1 和 3，然后取消选中 3，我希望 div 1 保持可见。代码将是这样的（只有 1 和 2 复选框有效）-

<input type="checkbox" name="1">1
<input type="checkbox" name="1">1
<input type="checkbox" name="2">2
<input type="checkbox" name="2">2
<input type="checkbox" name="???">1&2

<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>

<script type="text/javascript">

var MyCheckboxes1=$("input[name='1']");

MyCheckboxes1.change(function() {
  $("#showme1").toggle(MyCheckboxes1.is(":checked"));
});

var MyCheckboxes2=$("input[name='2']");

MyCheckboxes2.change(function() {
  $("#showme2").toggle(MyCheckboxes2.is(":checked"));
});
</script>

【问题讨论】：

作为更新，我尝试使用类来执行此操作，方法是像这样为 1&2 框分配两个类 - 但仍然没有运气。 IT 只承认第一个。我开始怀疑这是否会比我计划的更复杂:(

标签： jquery html checkbox

【解决方案1】：

这样的事情怎么样，简单的逻辑，使用基于是否选中复选框的 if else 语句：http://jsfiddle.net/qvhpfzs7/

<input type="checkbox" id="c1"/> show Div 1
<br/>
<input type="checkbox" id="c2"/> show Div 2
<br/>
<input type="checkbox" id="c3"/> show Div 1 AND Div 2
<br/><br/>
<div class="div1">THIS IS THE CONTENT OF DIV 1</div>
<div class="div2">THIS IS THE CONTENT OF DIV 2</div>

$(document).ready(function(){
    $('.div1').hide();
    $('.div2').hide();
    var d1 = false;
    var d2 = false;
    $('input[type="checkbox"]').on('change', function(){
        if ($('#c1').is(':checked')) { d1 = true; }
        else { d1 = false; }
        if ($('#c2').is(':checked')) { d2 = true; }
        else { d2 = false; }
        if ($('#c3').is(':checked')) {
            d1 = true;
            d2 = true;
        }
        if (d1) { $('.div1').show(); } else { $('.div1').hide(); }
        if (d2) { $('.div2').show(); } else { $('.div2').hide(); }  
    });
});

【讨论】：

【解决方案2】：

好的，在玩了一些游戏之后，以及一位名叫 Brian 的朋友和聪明人的想法，这就是我想出的解决方案。想想就很简单。

HTML-

<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>

JS-

var MyCheckboxes1=$("input[class='1']");

MyCheckboxes1.change(function() {
  $("#showme1").toggle(MyCheckboxes1.is(":checked") || MyCheckboxes12.is(":checked"));
});

var MyCheckboxes2=$("input[class='2']");

MyCheckboxes2.change(function() {
  $("#showme2").toggle(MyCheckboxes2.is(":checked") || MyCheckboxes12.is(":checked"));
});


var MyCheckboxes12=$("input[class='12']");

MyCheckboxes12.change(function() {
  $("#showme1").toggle(MyCheckboxes1.is(":checked") || MyCheckboxes12.is(":checked"));
  $("#showme2").toggle(MyCheckboxes2.is(":checked") || MyCheckboxes12.is(":checked"));
});

【讨论】：

【解决方案3】：

好吧，这就是我所拥有的。检查下面的代码

  <input type="checkbox" name="1">1
  <input type="checkbox" name="1">1
  <input type="checkbox" name="2">2
  <input type="checkbox" name="2">2
  <!-- <input type="checkbox" name="???">1&2 -->
  <input type="checkbox" name="3">3

  <div id="showme1" style="display: none">Show me1</div>
  <div id="showme2" style="display: none">Show me2</div>

<script>
  var MyCheckboxes1=$("input[name='1']");

  MyCheckboxes1.change(function() {
    $("#showme1").toggle(MyCheckboxes1.is(":checked"));
  });

  var MyCheckboxes2=$("input[name='2']");

  MyCheckboxes2.change(function() {
    $("#showme2").toggle(MyCheckboxes2.is(":checked"));
  });

  var MyCheckboxes3=$("input[name='3']");

  MyCheckboxes3.change(function() {
       <!-- for checkbox 3 I just toggled showme 1 & 2 -->
      $("#showme1").toggle();
      $("#showme2").toggle();
  });    
</script>

如果选择了 1 和 3，则取消选中 3 则 1 仍然可见。

【讨论】：

【解决方案4】：

这是我尝试过的。希望这会有所帮助。

JavaScript -

function handleClick(cb) {
        if(cb.checked==true){
            if(cb.name==3){ // Show both div
                $('#showme1').show();
                $('#showme2').show();
            }else{
                $('#showme'+cb.name).show();
            }
        }else{
            if(cb.name==3){ // Show both div 
                $('#showme1').hide();
                $('#showme2').hide();
            }else{
                $('#showme'+cb.name).hide();
            }
        }
      }

HTML -

<input type="checkbox" name="1" onclick='handleClick(this);'>1
<input type="checkbox" name="1" onclick='handleClick(this);'>1
<input type="checkbox" name="2" onclick='handleClick(this);'>2
<input type="checkbox" name="2" onclick='handleClick(this);'>2
<input type="checkbox" name="3" onclick='handleClick(this);'>3

<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>

您也可以在最初显示 div 时使用 toggle()。

【讨论】：