使用jquery隱藏或顯示多個div

Question

我有一個共同的問題，但有一個獨特的轉折。我有一個複選框列表。對於每個複選框，我想隱藏/顯示一個或多個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> 

Answer 1

好，有的玩後，從一個朋友和一個名爲布賴恩的智囊團的想法，這裏是我想出了一個辦法。很簡單，一旦我想到它。

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

Answer 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 --> 
    <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是仍然可見。

Answer 3

如何對這樣的事情，簡單的邏輯，如果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(); } 
    }); 
}); 

Answer 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（S）最初表示。