jquery

Question

我需要根据用户从下拉菜单中选择一个选项和单选按钮来显示不同的 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>

任何帮助都会很棒！

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

jquery - show/hide 元素基于 select 和单选按钮值

jquery - show/hide elements based on select and radio button values

event-handling

show-hide