Question

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

当用户回答“是”＆＃39;对于其中一个问题，显示了一个补充问题。该功能检测到＆＃34;是＆＃34;单选按钮输入的值。

我可以在其他＆＃39;是＆＃39; /＆＃39;否＆＃39;上重复使用相同的功能。如果我需要在用户回答“是”的情况下再显示一个问题，请提出问题。 - 我只是应用＆＃34;切换＆＃34;类到无线电输入，并设置data-target属性以匹配我想要显示的隐藏问题块的ID。

但是，我无法在表单中的其他问题上重复使用相同的功能，因为大多数问题都没有＆＃39;是＆＃39; /＆＃39;否＆＃ 39;答案。大多数输入值属性都是唯一的。

如何使该功能可重复使用，以便我可以应用相同的＆＃34;切换＆＃34;对任何问题进行分类以显示目标区块，而不是为每个需要补充问题的答案创建单独的函数？

以下是表单的简化示例 - 只有四个示例问题。第一个和最后一个问题具有是/否答案值，另外两个问题具有不同的答案值：

＆＃13;

$(document).ready(function() {
  $("input.toggle:radio").change(function() {
    if ($(this).val() == "yes") {
      $("#" + $(this).data("target")).slideDown();
    } else {
      $("#" + $(this).data("target")).slideUp();
    }
  });
});

＆＃13;

.extra {
  display: none;
}

＆＃13;

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

＆＃13;

感谢您提出的任何建议！

Answer 1

可能有多种方法可以执行此操作，我提出的一个方法是，您可以在单选按钮上添加一些类show，然后点击其中显示div.extra

请参阅以下代码......

＆＃13;

$(document).ready(function() {
  $("input.toggle:radio").change(function() {
    if ($(this).hasClass("show")){
      $("#" + $(this).data("target")).slideDown();
    } else {
      $("#" + $(this).data("target")).slideUp();
    }
  });
});

＆＃13;

.extra {
  display: none;
}

＆＃13;

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

＆＃13;

jQuery：如何为多组单选按钮重用相同的功能

1 个答案: