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

如何解决jQuery-根据选择和单选按钮值显示/隐藏元素

我需要基于用户从下拉菜单中选择选项和单选按钮来显示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>

任何帮助都会很棒！

解决方法

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

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