Jak przełączyć widoczność div za pomocą przycisków radiowych?

Question

Pracuję nad projektem, w którym muszę przełączać widoczność <div>.

Mam następujący kod:

<input type="radio" name="type" value="1"> Personal 
<input type="radio" name="type" value="2"> Business 

<div class="business-fields"> 
    <input type="text" name="company-name"> 
    <input type="text" name="vat-number"> 
</div> 

chciałbym togle Business-Fields div. Tak więc, jeśli żaden z przycisków radiowych lub "osobisty" przycisk radiowy jest wybrany: Element div powinien być ukryty. Jeśli przycisk opcji "biznes" jest zaznaczony, chcę go pokazać.

Obecnie używam tego kodu:

$("input[name='type']").click(function() { 
    var status = $(this).val(); 
    if (status == 2) { 
     $(".business-fields").show(); 
    } else { 
     $(".business-fields").hide(); 
    } 
}); 

Jednak, zastanawiałem się, czy mogę to zrobić za pomocą funkcji .toggle().

Answer 1

Sugeruję użyciu zdarzenie change i dostarczanie logiczny przełącznik sposobu toggle(), która pokaże kolekcję jQuery elementów jeśli przełącznik ocenia się true i ukryć je, jeśli ocenia się false:

// select the relevant <input> elements, and using on() to bind a change event-handler: 
 
$('input[name="type"]').on('change', function() { 
 
    // this, in the anonymous function, refers to the changed-<input>: 
 
    // select the element(s) you want to show/hide: 
 
    $('.business-fields') 
 
     // pass a Boolean to the method, if the numeric-value of the changed-<input> 
 
     // is exactly equal to 2 and that <input> is checked, the .business-fields 
 
     // will be shown: 
 
     .toggle(+this.value === 2 && this.checked); 
 
// trigger the change event, to show/hide the .business-fields element(s) on 
 
// page-load: 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="radio" name="type" value="1">Personal</label> 
 
<label> 
 
    <input type="radio" name="type" value="2">Business</label> 
 

 
<div class="business-fields"> 
 
    <input type="text" name="company-name"> 
 
    <input type="text" name="vat-number"> 
 
</div>

Nawiasem mówiąc, owinięto również powiązany tekst, aby wskazać cel przycisku radiowego, wewnątrz elementu <label>, aby bezpośrednio skojarzyć ten tekst z <input>, więc kliknięcie tego tekstu automatycznie sprawdzi, czy kod <input> jest automatyczny.

Odniesienia:

• change().
• on().
• toggle().

Answer 2

można używać tak:

$("input[name='type']").change(function() { 
    var status = $(this).val(); 
    if (status != 2) { 
     $(".business-fields").hide(); 
    } else { 
     $(".business-fields").show(); 
    } 
}); 

Answer 3

użycie poniższy kod

<script> 
$(function(){ 
$(":radio[value=1]").click(function(){ 
    var isVisible = $(".business-fields").is(":visible"); 
    if(isVisible==true) 
     $('.business-fields').toggle(); 
}); 

$(":radio[value=2]").click(function(){ 
    var isVisible = $(".business-fields").is(":visible"); 
    if(isVisible==false) 
     $('.business-fields').toggle(); 
}); 
}); 
</script> 

i HTML jest-

<input name="type" type="radio" value="1" >Personal 
<input type="radio" name="type" value="2" checked="checked"> Business 

<div class="business-fields"> 
    <input type="text" name="company-name"> 
    <input type="text" name="vat-number"> 
</div> 

Answer 4

JS Fiddle

Spróbuj jeden

<input type="radio" name="type" value="1" checked ="true"> Personal 
<input type="radio" name="type" value="2"> Business 

<div class="business-fields"> 
    <input type="text" name="company-name"> 
    <input type="text" name="vat-number"> 
</div> 

.business-fields{ 
    display: none; 
} 



    $("input[name='type']").change(function() { 
     $(".business-fields").toggle(); 
}); 

Answer 5

Zazwyczaj nie używam JS jeśli to możliwe, dlatego przychodzi podejście oparte na HTML + CSS.

.bussines-type .business-fields { 
 
\t display: none; 
 
} 
 

 
.bussines-type input[value="2"]:checked ~ .business-fields { 
 
\t display: block; 
 
}

<div class="bussines-type"> 
 
\t <input id="bt1" type="radio" name="type" value="1"> 
 
     <label for="bt1"> Personal</label> 
 
\t <input id="bt2" type="radio" name="type" value="2"> 
 
     <label for="bt2"> Business</label> 
 

 
\t <div class="business-fields"> 
 
\t \t <input type="text" placeholder="Company name" name="company-name"> 
 
\t \t <input type="text" placeholder="Vat number" name="vat-number"> 
 
\t </div> 
 
</div>

W ~ oznacza dowolną rodzeństwa, które po elemencie zdefiniowanej przed znakiem ~.

Answer 6

.show i .hide są dość powolne. https://twitter.com/paul_irish/status/564443848613847040

Lepiej jest włączać i wyłączać klasę css za pomocą javascript. Ustaw css klasy na {widoczność: ukryta} lub {display: none}

Answer 7

Prawdopodobnie bardziej eleganckie rozwiązanie, Jest to nieco bardziej czytelne według mojej opinii, a jako @Ollie_W wskazuje, że może być bardziej wydajne niż przełącz (pokaż/ukryj).

$('input[name="type"]').on('change', function(event) { 
 
    var radioButton = $(event.currentTarget), 
 
     isBusiness = radioButton.val() === 'business' && radioButton.prop('checked'); 
 
    $('.business-fields').toggleClass('hidden', !isBusiness); 
 
}).change();

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="radio" name="type" value="personal">Personal</label> 
 
<label> 
 
    <input type="radio" name="type" value="business">Business</label> 
 

 
<div class="business-fields hidden"> 
 
    <input type="text" name="company-name"> 
 
    <input type="text" name="vat-number"> 
 
</div>