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

Question

I'm needing to display different combinations of divs based on both on a user selecting an option from a dropdown AND a radio button. The radio buttons will appear once a value from the dropdown has been selected, then the boxes will appear based on the radio option value.

For example:

• "option 1" and "Yes" would display Content Box 1 and 4
• "option 1" and "No" would display Content Box 2 and 3
• "option 2" and "No" would display Content Box and 4

We're using jquery and I'm able to get the radio options appearing, but I have no idea how to go about displaying the boxes based on the two values.

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

Any help would be awesome!

Answer 1

Write a function that shows the appropriate content boxes based on both the dropdown and radio button values. Then call it from the change handlers for both of them.

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