javascript - Hur man inte visar div-området när en specifik kryssruta inte är markerad?

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

Nu har jag tre kryssrutor och kan endast ha en markerad för tillfället. Dessutom kommer ett grått område att visas när "Item2" är markerad.

När jag markerar item2 först (det grå området visas) och sedan markerar item1 eller item3, kommer item2 att avmarkeras men det gråa området visas fortfarande.

Hur man inte visar grå område när item2 inte är markerad?

Svar #1

Du kan använda jquery toggle när användaren klickar på en annan kryssruta. Du kan sammanfatta det så här:

$(".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. Förresten, varför använder du inte radioknappar istället?

Svar #2

Det kan göras inom .registration_info klickhändelsen:

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