如何使用单选按钮切换div可见性？

Question

I'm working on a project in which I have to toggle the visibility of a <div> .

I've got the following code:

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

I would like to togle the business-fields div. So, if none of the radio buttons, or the 'personal' radio button is selected: The div should be hidden. If the 'business' radio button is selected, I want it to show.

Currently, I am using this code:

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

However, I was wondering if I can do this using the .toggle() function.

Answer 1

I'd suggest using the change event, and supplying a Boolean switch to the toggle() method, which will show the jQuery collection of elements if the switch evaluates to true , and hide them if it evaluates to 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> 

Incidentally, note I've also wrapped the associated text, to indicate the radio-button's purpose, inside of a <label> element to directly associate that text with the <input> , so clicking the text checks the <input> automatically.

References:

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

Answer 2

I usually tend not to use JS if possible, therefore here comes a HTML+CSS way approach.

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

 <div class="bussines-type"> <input id="bt1" type="radio" name="type" value="1"> <label for="bt1"> Personal</label> <input id="bt2" type="radio" name="type" value="2"> <label for="bt2"> Business</label> <div class="business-fields"> <input type="text" placeholder="Company name" name="company-name"> <input type="text" placeholder="Vat number" name="vat-number"> </div> </div> 

The ~ stands for any siblings, that are after the element we defined before the ~ sign.

Answer 3

JS Fiddle

Try this one

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

You may use like this:

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

Answer 5

.show and .hide are pretty slow. https://twitter.com/paul_irish/status/564443848613847040

It's better to toggle a css class on and off with javascript. Set the css of the class to {visibility: hidden} or {display: none}

Answer 6

use the below code

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

AND HTML is-

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

Possibly a more elegant solution, It's a bit more readable in my opinion, and and as @Ollie_W points out it might be more performant that toggle (show/hide).

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