javascript - jQuery:如何为多组单选按钮重复使用相同的功能

我有一个HTML表单，其中包含带有单选按钮格式的多项选择题的问题。

当用户对一个问题回答“是”时，将显示一个补充问题。该功能检测单选按钮输入的“是”值。

如果在用户回答“是”时需要显示一个额外的问题，我可以在其他“是” /“否”问题上重复使用相同的功能-我只是将“切换”类应用于无线电输入，并进行设置data-target属性以匹配我要显示的隐藏问题块的ID。

但是，我不能在表格中的其他问题上重复使用相同的功能，因为大多数问题没有“是” /“否”答案。大多数输入值属性都是唯一的。

如何使该函数可重用，以便我可以对任何问题应用相同的“ toggle”类以显示目标块，而不是为每个需要补充问题的答案创建单独的函数？

以下是表格的简化示例-仅是四个示例问题。第一个和最后一个问题的答案是/否，其他两个问题的答案值不同：

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

感谢您提供的任何建议！

最佳答案

可能有多种方法可以执行此操作，我要介绍的一种方法是，您可以在单选按钮上添加一些类，例如show，单击该类时应显示div.extra

参见下面的代码...

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