根据复选框选择隐藏/显示 div

Question

我想根据复选框选择显示/隐藏 div。

这里是场景，

• 我在一个名为 decider 的 div 中有两个复选框，
• 选中复选框一应显示 Div 框一
• 选中复选框 2 应显示 Div 框 2

一旦有人做出选择，我希望 decider div 隐藏。我无法完成这项工作

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

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

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

<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() {
	$('.decider').removeClass('hide');
	$('.box-one,.box-two').addClass('hide');//add hide to both the class
    
	$("#optionTwo").click(function() {
	    $('#optionOne').attr("checked",false);
	});

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

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

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