jquery - 根据选择和单选按钮值显示/隐藏元素答案

【问题标题】：jquery - show/hide elements based on select and radio button valuesjquery - 根据选择和单选按钮值显示/隐藏元素
【发布时间】：2020-11-11 04:53:33
【问题描述】：

我需要根据用户从下拉列表和单选按钮中选择选项来显示不同的 div 组合。一旦从下拉列表中选择了一个值，就会出现单选按钮，然后将根据单选选项值显示这些框。

例如：

“选项 1”和“是”将显示内容框 1 和 4
“选项 1”和“否”将显示内容框 2 和 3
“选项 2”和“否”将显示内容框和 4

我们正在使用 jquery，我能够显示单选选项，但我不知道如何根据这两个值显示框。

(function() {

  function runOffer() {

    // Show/hide radio buttons
    $('#selectOption').change(function() {
      $('.radio-btnWrapper').show();
    });

  }

  var checkJQ = window.setInterval(function() {
    if (typeof $ !== 'undefined') {
      window.clearInterval(checkJQ);
      runOffer();
    }
  }, 50);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOption" class="Input marginBottom--x2">
  <option value="">Please select...</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
  <option value="c">Option C</option>
  <option value="d">Option D</option>
  <option value="e">Option E</option>
</select>
<div class="radio-btnWrapper" style="display: none;">
  <p class="Type--colourLight Type--bold">Can your car be safely driven?</p>
  <div class="Radio-btnGroup">
    <label class="Radio Radio-btn widthSmaller">
            <input type="radio" name="radiocheck-radioBtnGroup" value="Yes" class="Radio-input">
            <i class="Radio-icon"></i>
            <span class="Radio-text">Yes</span>
        </label><label class="Radio Radio-btn widthSmaller">
            <input type="radio" name="radiocheck-radioBtnGroup" value="No" class="Radio-input">
            <i class="Radio-icon"></i>
            <span class="Radio-text">No</span>
        </label>
  </div>
</div>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox1" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 1</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox2" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 2</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox3" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 3</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox4" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 4</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>

任何帮助都会很棒！

【问题讨论】：

在单选按钮上放置一个事件处理程序，以根据组合显示适当的 DIV。

标签： jquery event-handling show-hide

【解决方案1】：

编写一个函数，根据下拉菜单和单选按钮的值显示适当的内容框。然后从它们的更改处理程序中调用它。

(function() {

  function showContents() {
    let select = $("#selectOption").val();
    let radio = $(".Radio-input:checked").val();
    $(".Box").hide(); // hide all the boxes first, then show based on the selections
    if (select == "a" && radio == 'Yes') {
      $(".contentBox1, .contentBox4").show();
    } else if (select == "a" && radio == 'No') {
      $(".contentBox2, .contentBox3").show();
    } else if (select == 'b' && radio == 'Yes') {
      $(".contentBox4").show();
    }
  }

  $('#selectOption').change(function() {
    $('.radio-btnWrapper').show();
    showContents();
  });

  $(".Radio-input").change(function() {
    showContents();
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOption" class="Input marginBottom--x2">
  <option value="">Please select...</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
  <option value="c">Option C</option>
  <option value="d">Option D</option>
  <option value="e">Option E</option>
</select>
<div class="radio-btnWrapper" style="display: none;">
  <p class="Type--colourLight Type--bold">Can your car be safely driven?</p>
  <div class="Radio-btnGroup">
    <label class="Radio Radio-btn widthSmaller">
            <input type="radio" name="radiocheck-radioBtnGroup" value="Yes" class="Radio-input">
            <i class="Radio-icon"></i>
            <span class="Radio-text">Yes</span>
        </label><label class="Radio Radio-btn widthSmaller">
            <input type="radio" name="radiocheck-radioBtnGroup" value="No" class="Radio-input">
            <i class="Radio-icon"></i>
            <span class="Radio-text">No</span>
        </label>
  </div>
</div>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox1" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 1</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox2" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 2</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox3" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 3</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox4" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 4</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>

【讨论】：