javascript - 未选中特定复选框按钮时如何不显示 div 区域？

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>

现在，我有三个复选框，目前只能选中一个。此外，选中“Item2”时会显示灰色区域。

当我先检查item2(灰色区域显示)然后检查item1或item3时，item2将取消检查但灰色区域仍然显示。

item2未勾选时如何不显示灰色区域？

Answer 1

您可以使用 jquery toggle当用户单击另一个复选框时。您可以总结为:

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

附注顺便问一下，为什么不使用单选按钮呢？