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

$(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 未选中时，如何不显示灰色区域？

答案＃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>

附言：顺便问一下，你为什么不改用单选按钮呢？

答案＃2

它可以在 .registration_info 点击事件 内完成：

$(document).ready(function(){
  
  $("#some_area").hide();
  
  $(".registration_info input").click(function(){
    
    $("#some_area").hide();
    
    if($(this).prop("checked")){
      $(".registration_info input:checkbox").prop("checked", false);
      $(this).prop("checked", true);
      if ($(this).attr('id')=='area'){
        $("#some_area").show();
      }
    }
  });
});

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