Question

150

How to toggle div visibility using radio buttons?

rated 0 times [ 156] [ 6] / answers: 1 / hits: 15747 / 10 Years ago, thu, december 18, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelyn

Add To Favorites

Follow

Total Points: 619

Total Questions: 102

Total Answers: 104

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

jaelyn questions

1 How to configure vue 3 router children properly to have nested routes working as expected?

Mon, Apr 11, 22, 00:00, 2 Years ago

1 The best way to pass authorization header in nextJs using Apollo client? ReferenceError: localStorage is not defined

Thu, Jul 23, 20, 00:00, 4 Years ago

1 React send multiple requests in a loop and wait

Tue, Apr 28, 20, 00:00, 4 Years ago

1 How can I change the checkbox styles and icons when hover on it in Material-UI React?

Thu, Mar 19, 20, 00:00, 4 Years ago

1 Node.js spawn: Keep StdOut and StdErr in the original order

Mon, Jul 15, 19, 00:00, 5 Years ago

View All

answered 10 Years ago kyrona · Accepted Answer

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().