根據複選框選擇隱藏/顯示div

Question

我想根據複選框選擇顯示/隱藏div。

這裏的情景，

• 我有一個div兩個檢查框名爲決勝局，
• 選擇複選框應該顯示事業部盒一個
• 選擇複選框兩者要展示DIV箱兩

一旦有人做出了選擇，我想決勝局 DIV隱藏。我不能夠使這項工作

$(function() { 
 
\t $('.decider').removeClass('hide'); 
 
\t $('.box-one').addClass('hide'); 
 
    
 
\t $("#optionTwo").click(function() { 
 
\t  $('#optionOne').attr("checked",false); 
 
\t }); 
 

 
\t $("#optionOne").click(function() { 
 
\t  $('#optionTwo').attr("checked",false); 
 
\t }); 
 

 
\t $("#send-decide").click(function() { 
 
\t \t if($('#optionTwo').is(':checked')){ 
 
\t \t \t $('.decider ').addClass('hide'); 
 
\t \t \t $('.box-one').removeClass('hide'); 
 
\t \t } 
 
\t \t if($('#optionOne').is(':checked')){ 
 
\t \t \t $('.decider ').addClass('hide'); 
 
\t \t \t $('.box-two').removeClass('hide'); 
 
\t \t } 
 
\t }); 
 
});

<div class="decider hide"> 
 
    <p style="font-size:10px;color:#000;">Please select an option below</p> 
 
    <label class="checkbox"> 
 
    <input id="optionTwo" type="checkbox" name="Request" value="Request" /> 
 
    Select Box one </label> 
 
    <label class="checkbox"> 
 
    <input id="optionOne" type="checkbox" name="Download" value="Download" /> 
 
    Select Box two </label> 
 
    <br /> 
 
    <span class="select"> 
 
    <input type="button" id="send-decide" alt="submit" value="select" /> 
 
    </span> </div> 
 
    
 
<div class="box-one"> 
 
    <p>this is first box</p> 
 
</div> 
 

 
<div class="box-two hide"> 
 
    <p>this is second box</p> 
 
</div>

Answer 1

你缺少.hide類display:none財產CSS ..休息，一切都很好

$(function() { 
 
\t $('.decider').removeClass('hide'); 
 
\t $('.box-one,.box-two').addClass('hide');//add hide to both the class 
 
    
 
\t $("#optionTwo").click(function() { 
 
\t  $('#optionOne').attr("checked",false); 
 
\t }); 
 

 
\t $("#optionOne").click(function() { 
 
\t  $('#optionTwo').attr("checked",false); 
 
\t }); 
 

 
\t $("#send-decide").click(function() { 
 
     if($('input[type="checkbox"]:checked').length)//check whether any checkbox is checked 
 
     { 
 
      //if yes go ahead and do what you wanted to do 
 
      $('.decider ').addClass('hide'); //hide it in any case 
 
      if($('#optionTwo').is(':checked')){ 
 
       $('.box-one').removeClass('hide'); 
 
      } 
 
      if($('#optionOne').is(':checked')){ 
 
       $('.box-two').removeClass('hide'); 
 
      } 
 
     } 
 
     else 
 
      alert('select a checkbox');//if not display some message to user 
 
\t }); 
 
});

.hide{ 
 
    display:none; //add this property 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="decider hide"> 
 
    <p style="font-size:10px;color:#000;">Please select an option below</p> 
 
    <label class="checkbox"> 
 
    <input id="optionTwo" type="checkbox" name="Request" value="Request" /> 
 
    Select Box one </label> 
 
    <label class="checkbox"> 
 
    <input id="optionOne" type="checkbox" name="Download" value="Download" /> 
 
    Select Box two </label> 
 
    <br /> 
 
    <span class="select"> 
 
    <input type="button" id="send-decide" alt="submit" value="select" /> 
 
    </span> </div> 
 
    
 
<div class="box-one"> 
 
    <p>this is first box</p> 
 
</div> 
 

 
<div class="box-two"> 
 
    <p>this is second box</p> 
 
</div>