CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
JonB
JonB

Reputation: 127

jQuery: how to re-use same function for multiple sets of radio buttons

I have a HTML form which includes questions with multiple choice answers formatted as radio buttons.

When the user answers 'Yes' to one of the questions, a supplementary question is shown. The function detects the "yes" value of the radio button input.

I can re-use the same function on other 'Yes'/'No' questions if I need to show an extra question when a user answers 'Yes' - I just apply the "toggle" class to the radio inputs, and set up the data-target attribute to match the ID of the hidden question block I want to show.

However, I can't re-use the same function on other questions in the form, because most of the questions don't have 'Yes'/'No' answers. Most of the input value attributes are unique.

How can the function be made re-usable, so that I can apply the same "toggle" class on any question in order to reveal a target block, rather than create a separate function for each answer that requires a supplementary question?

Below is a simplified example of the form - just four sample questions. The first and last questions have yes/no answer values, the other two questions have different answer values:

$(document).ready(function() {
  $("input.toggle:radio").change(function() {
    if ($(this).val() == "yes") {
      $("#" + $(this).data("target")).slideDown();
    } else {
      $("#" + $(this).data("target")).slideUp();
    }
  });
});
.extra {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
  <div class="question">
    <p><b>Question 1: Do you have a driving licence?</b></p>
    <label><input type="radio" class="toggle" name="question1" value="no" data-target="extra-box1"> No</label>
    <label><input type="radio" class="toggle" name="question1" value="yes" data-target="extra-box1"> Yes</label>
    <div id="extra-box1" class="extra"><i>If user clicks 'Yes', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 2: What's your favourite primary colour?</b></p>
    <label><input type="radio" class="toggle" name="question2" value="red" data-target="extra-box2"> Red</label>
    <label><input type="radio" class="toggle" name="question2" value="yellow" data-target="extra-box2"> Yellow</label>
    <label><input type="radio" class="toggle" name="question2" value="blue" data-target="extra-box2"> Blue</label>
    <div id="extra-box2" class="extra"><i>If user clicks 'Yellow', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 3: What is your employment status?</b></p>
    <label><input type="radio" class="toggle" name="question3" value="employed" data-target="extra-box3"> Employed</label>
    <label><input type="radio" class="toggle" name="question3" value="unemployed" data-target="extra-box3"> Unemployed</label>
    <div id="extra-box3" class="extra"><i>If user clicks 'Unemployed', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 4: Do you own your own home?</b></p>
    <label><input type="radio" class="toggle" name="question4" value="no" data-target="extra-box4"> No</label>
    <label><input type="radio" class="toggle" name="question4" value="yes" data-target="extra-box4"> Yes</label>
    <div id="extra-box4" class="extra"><i>If user clicks 'Yes', show this block</i></div>
  </div>
  
</form>

Thanks for any suggestions you can offer!

Upvotes: 0

Views: 92

Answers (1)

void
void

Reputation: 36703

There could be multiple approaches to do this, one I am putting is that you can add some class say show to the radio button and on click of which you should show the div.extra

See the code below...

$(document).ready(function() {
  $("input.toggle:radio").change(function() {
    if ($(this).hasClass("show")){
      $("#" + $(this).data("target")).slideDown();
    } else {
      $("#" + $(this).data("target")).slideUp();
    }
  });
});
.extra {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
  <div class="question">
    <p><b>Question 1: Do you have a driving licence?</b></p>
    <label><input type="radio" class="toggle" name="question1" value="no" data-target="extra-box1"> No</label>
    <label><input type="radio" class="toggle show" name="question1" value="yes" data-target="extra-box1"> Yes</label>
    <div id="extra-box1" class="extra"><i>If user clicks 'Yes', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 2: What's your favourite primary colour?</b></p>
    <label><input type="radio" class="toggle" name="question2" value="red" data-target="extra-box2"> Red</label>
    <label><input type="radio" class="toggle show" name="question2" value="yellow" data-target="extra-box2"> Yellow</label>
    <label><input type="radio" class="toggle" name="question2" value="blue" data-target="extra-box2"> Blue</label>
    <div id="extra-box2" class="extra"><i>If user clicks 'Yellow', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 3: What is your employment status?</b></p>
    <label><input type="radio" class="toggle" name="question3" value="employed" data-target="extra-box3"> Employed</label>
    <label><input type="radio" class="toggle show" name="question3" value="unemployed" data-target="extra-box3"> Unemployed</label>
    <div id="extra-box3" class="extra"><i>If user clicks 'Unemployed', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 4: Do you own your own home?</b></p>
    <label><input type="radio" class="toggle" name="question4" value="no" data-target="extra-box4"> No</label>
    <label><input type="radio" class="toggle show" name="question4" value="yes" data-target="extra-box4"> Yes</label>
    <div id="extra-box4" class="extra"><i>If user clicks 'Yes', show this block</i></div>
  </div>
  
</form>

Upvotes: 5

Related Questions