How to not showing div area when specific checkbox button is not checked?

Question

$(document).ready(function(){
  $(".registration_info input").click(function(){
    if($(this).prop("checked")){
      $(".registration_info input:checkbox").prop("checked", false);
      $(this).prop("checked", true);
    }
  });
});

// -------- dealer area --------

$(document).ready(function(){
  $("#area").click(function(){
    if($(this).is(":checked")){
      $("#some_area").show();
    }
    else
      $("#some_area").hide();
  });
});

#some_area {
  width:200px;
  height:200px;
  background-color: #f2f2f2;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                                                              
<div class="registration_info">
  <label>
    <input type="checkbox" value="Item1">Item1
  </label>
  <label>
    <input type="checkbox" value="Item2" id="area">Item2
  </label>
  <label>
  <input type="checkbox" value="Item3">Item3
  </label>
  
  <div>
    <div id="some_area">Some_area
    </div>
  </div>
</div>

Now, I have three checkbox and only can have one checked at the moment. Also, there is a gray color area will show out when "Item2" was checked.

When I check item2 first (the gray area show) then check item1 or item3, the item2 will un-check but the gray color area still show out.

How to not show gray area when item2 is not checked?

Answer 1

You can use jquery toggle when user click another checkbox. You can sum it up to this:

$(".registration_info input").click(function() {
  if ($(this).prop("checked")) {
    $(".registration_info input:checkbox").prop("checked", false);
    $(this).prop("checked", true);
  }
  //here toggle #some_area element according to check status
  $("#some_area").toggle($("#area").prop("checked"));
});

#some_area {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="registration_info">
  <label>
    <input type="checkbox" value="Item1" />Item1</label>
  <label>
    <input type="checkbox" value="Item2" id="area" />Item2</label>
  <label>
    <input type="checkbox" value="Item3" />Item3</label>
  <div>
    <div id="some_area">Some_area</div>
  </div>
</div>

p.s. By the way why you don't use radio buttons instead?