Скрыть/показать divs на основе выбора флажка

Question

Я хочу показать/скрыть divs на основе выбора флажка.

здесь сценарий,

• У меня есть два флажка в 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 .. Rest все нормально

$(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>