Jak nie wyświetlać obszaru div, gdy zaznaczony przycisk pola wyboru nie jest zaznaczony?

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>

Teraz mam trzy pola wyboru i tylko on może mieć jeden sprawdzony w tej chwili. Ponadto jest zaznaczony szary obszar, gdy zaznaczono "Item2".

Kiedy najpierw sprawdzam element 2 (szara strefa), a następnie zaznaczam element 1 lub element 3, element 2 zostanie anulowany, ale nadal będzie widoczny szary obszar.

Jak nie wyświetlać szarego obszaru, gdy element 2 nie jest zaznaczony?

Answer 1

Możesz użyć jquery toggle, gdy użytkownik kliknie inne pole wyboru. można podsumować tak:

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

PS: Przy okazji, dlaczego nie używasz przycisków radiowych?

Answer 2

Można to zrobić obrębie .registration_info kliknij zdarzenie:

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

Answer 3

Należy powiązać change obsługi, nie kliknięcie handler:

$('.registration_info').on('change', function(e) { 
 
    $(this).find('input').not(e.target).prop('checked', false); 
 
    $('#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/2.1.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>

Answer 4

Ok, przede wszystkim, można użyć wejść radiowych za to przełączniki ...

drugie, dzwonisz zdarzenie tylko kliknąć na „#area” więc wyboru nie nastąpi po kliknięciu inny element, stanie się to tylko po odznaczeniu/sprawdzeniu elementu "#area".

Aby obejść ten problem, można umieścić klasę na każdym wejściu wyboru i to zrobić:

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

Answer 5

Oto rozwiązanie przy użyciu tylko 2 linie CSS i JavaScript nie na wszystkie. Aby to zaimplementować, nieznacznie zmodyfikowałem Twój kod HTML tak, aby wejście było rodzajem ostatecznego div, którego celujesz, lub jednym z jego rodziców, pozwalając mi użyć ~, selektora "ogólnego rodzeństwa".

#some_area {display: none;} 
 
#area:checked ~ div #some_area {display:block;}

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