javascript html jquery radio-button show-hide

Show choices based on radio button selection but some selections showing the same choice

Below is a script I'm currently using. We show off choices that vary on name but some will show off the same options (IE Sap Cherry and Cherry will show the same finishes). Trying to get it to where if a choice if selected, it hides the other ones from being shown. How can I get it to where some choices share the same selector?

I have it written up this way because our website uses a plugin which helps us add in options easily. This script is to allow us to conditionally show options off and manage changes easily. I don't have any control how it generates the HTML so I have to work around that.

jQuery(function($) {
  function woodSelection(woodType) {
    var classSelector = "." + woodType.replace(/\s+/g, '-').toLowerCase() + "-stains-div";
    $(classSelector).hide();
    $('#wood-choices input[type="radio"]').on('change', function() {
      if ($(this).val().startsWith(woodType)) {
        $(classSelector).show();
        $(".wood-swatch-div").not(classSelector).find("input[type='radio']").prop("checked", false);
      } else {
        $(classSelector).hide();
      }
    });
  }

  // Call the function when the document is ready
  $(document).ready(function() {
    var woodTypes = ['Oak', 'Brown Maple', 'Wormy Maple', 'Cherry', 'Sap Cherry', 'Rustic Cherry', 'Hickory', 'Rustic Hickory', 'Hard Maple', 'Quartersawn White Oak', 'Rustic Quartersawn White Oak', 'Walnut', 'Rustic Walnut'];

    $.each(woodTypes, function(index, woodType) {
      woodSelection(woodType);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wood-choices">
<label class="tm-epo-field-label" for="tmcp_choice_0">
  <input type="radio" name="tmcp_radio_0" id="tmcp_choice_0" value="Oak_0">
  <span>Oak</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_1">
  <input type="radio" name="tmcp_radio_0" value="Rustic Cherry_1">
  <span>Rustic Cherry</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_2">
  <input type="radio" name="tmcp_radio_0" value="Rustic Hickory_2">
  <span>Rustic Hickory</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_3">
  <input type="radio" name="tmcp_radio_0" value="Brown Maple_3">
  <span>Brown Maple</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_4">
  <input type="radio" name="tmcp_radio_0" value="Sap Cherry_4">
  <span>Sap Cherry</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_5">
  <input type="radio" name="tmcp_radio_0" value="Hard Maple_5">
  <span>Hard Maple</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_6">
  <input type="radio" name="tmcp_radio_0" value="Hickory_6">
  <span>Hickory</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_7">
  <input type="radio" name="tmcp_radio_0" value="Cherry_7">
  <span>Cherry</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_8">
  <input type="radio" name="tmcp_radio_0" value="Quartersawn White Oak_8">
  <span>Quartersawn White Oak</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_9">
  <input type="radio" name="tmcp_radio_0" value="Rustic Walnut_9">
  <span>Rustic Walnut</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_10">
  <input type="radio" name="tmcp_radio_0" value="Walnut_10">
  <span>Walnut</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_11">
  <input type="radio" name="tmcp_radio_0" value="Wormy Maple_11">
  <span>Wormy Maple</span>
 </label>
</div>
<div class="stain-container">
  <div class="oak-stains-div wood-swatch-div">
    <p>Oak finishes shown here</p>
  </div>
  <div class="brown-maple-stains-div wormy-maple-stains-div wood-swatch-div">
    <p>Brown &amp; Wormy finishes shown here</p>
  </div>
  <div class="cherry-stains-div rustic-cherry-stains-div sap-cherry-stains-div wood-swatch-div">
    <p>Rustic, Sap, &amp; Clean Cherry finishes shown here</p>
  </div>
  <div class="hard-maple-stains-div wood-swatch-div">
    <p>Hard Maple finishes shown here</p>
  </div>
  <div class="hickory-stains-div rustic-hickory-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Hickory finishes shown here</p>
  </div>
  <div class="rustic-quartersawn-white-oak-stains-div quartersawn-white-oak-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Quartersawn White Oak finishes shown here</p>
  </div>
  <div class="rustic-walnut-stains-div walnut-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Walnut finishes shown here</p>
  </div>
</div>

I've also tried the mapping the options so some will be paired but this didn't work either:

jQuery(function($) {
  function woodSelection(woodType, classSelector) {
    $(classSelector).hide();
    $('#wood-choices input[type="radio"]').on('change', function() {
      if ($(this).val().startsWith(woodType)) {
        $(classSelector).show();
        $(".wood-swatch-div").not(classSelector).find("input[type='radio']").prop("checked", false);
      } else {
        $(classSelector).hide();
      }
    });
  }

  // Call the function when the document is ready
  $(document).ready(function() {
    var woodTypes = [
    { name: 'Oak', selector: '.oak-stains-div' },
    { name: 'Brown Maple', selector: '.brown-maple-stains-div' },
    { name: 'Wormy Maple', selector: '.brown-maple-stains-div' },
    { name: 'Cherry', selector: '.cherry-stains-div' },
    { name: 'Sap Cherry', selector: '.cherry-stains-div' },
    { name: 'Rustic Cherry', selector: '.cherry-stains-div' },
    { name: 'Hickory', selector: '.hickory-stains-div' },
    { name: 'Rustic Hickory', selector: '.hickory-stains-div' },
    { name: 'Hard Maple', selector: '.hard-maple-stains-div' },
    { name: 'Quartersawn White Oak', selector: '.quartersawn-white-oak-stains-div' },
    { name: 'Rustic Quartersawn White Oak', selector: '.quartersawn-white-oak-stains-div' },
    { name: 'Walnut', selector: '.walnut-stains-div' },
    { name: 'Rustic Walnut', selector: '.walnut-stains-div' }
    ];

    $.each(woodTypes, function(index, woodType) {
      woodSelection(woodType.name, woodType.selector);
    });
  });
});

Solution

Instead of your woodTypes array, I would create a map which has each radio value as a key and the corresponding CSS selector as the value.

We can add a change event listener to all of our radios. When the handler for the change event is invoked, it can get the value attribute of the radio that was clicked - the CSS selector to show. We can then loop through all of .wood-swatch-div elements and show the element if it has the selector, otherwise hide it.

Update It is an odd design to have the radio values include their display indexes. However, we can work around this constraint by simply omitting the index portion from our map keys (Oak instead of Oak_0) and then removing the index when we get the value of the selected radio button - $(this).val().replace(/_\d*$/, '').

The code now becomes:

const selectorsByValue = {
  'Oak': '.oak-stains-div',
  'Rustic Cherry': '.cherry-stains-div',
  'Rustic Hickory': '.hickory-stains-div',
  'Brown Maple': '.brown-maple-stains-div',
  'Sap Cherry': '.cherry-stains-div',
  'Hard Maple': '.hard-maple-stains-div',
  'Hickory': '.hickory-stains-div',
  'Cherry': '.cherry-stains-div',
  'Quartersawn White Oak': '.quartersawn-white-oak-stains-div',
  'Rustic Walnut': '.walnut-stains-div',
  'Walnut': '.walnut-stains-div',
  'Wormy Maple': '.brown-maple-stains-div'
};

$('.wood-swatch-div').hide();

$('input[type="radio"][name="tmcp_radio_0"]').on('change', function () {
  const val = $(this).val().replace(/_\d*$/, '');
  const selector = selectorsByValue[val];
  
  $('.wood-swatch-div').each(function () {
    const $this = $(this);
    if ($this.is(selector)) {
      $this.show();
    } else {
      $this.hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wood-choices">
  <label class="tm-epo-field-label" for="tmcp_choice_0">
    <input type="radio" name="tmcp_radio_0" id="tmcp_choice_0" value="Oak_0">
    <span>Oak</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_1">
    <input type="radio" name="tmcp_radio_0" value="Rustic Cherry_1">
    <span>Rustic Cherry</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_2">
    <input type="radio" name="tmcp_radio_0" value="Rustic Hickory_2">
    <span>Rustic Hickory</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_3">
    <input type="radio" name="tmcp_radio_0" value="Brown Maple_3">
    <span>Brown Maple</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_4">
    <input type="radio" name="tmcp_radio_0" value="Sap Cherry_4">
    <span>Sap Cherry</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_5">
    <input type="radio" name="tmcp_radio_0" value="Hard Maple_5">
    <span>Hard Maple</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_6">
    <input type="radio" name="tmcp_radio_0" value="Hickory_6">
    <span>Hickory</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_7">
    <input type="radio" name="tmcp_radio_0" value="Cherry_7">
    <span>Cherry</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_8">
    <input type="radio" name="tmcp_radio_0" value="Quartersawn White Oak_8">
    <span>Quartersawn White Oak</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_9">
    <input type="radio" name="tmcp_radio_0" value="Rustic Walnut_9">
    <span>Rustic Walnut</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_10">
    <input type="radio" name="tmcp_radio_0" value="Walnut_10">
    <span>Walnut</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_11">
    <input type="radio" name="tmcp_radio_0" value="Wormy Maple_11">
    <span>Wormy Maple</span>
  </label>
</div>
<div class="stain-container">
  <div class="oak-stains-div wood-swatch-div">
    <p>Oak finishes shown here</p>
  </div>
  <div class="brown-maple-stains-div wormy-maple-stains-div wood-swatch-div">
    <p>Brown &amp; Wormy finishes shown here</p>
  </div>
  <div class="cherry-stains-div rustic-cherry-stains-div sap-cherry-stains-div wood-swatch-div">
    <p>Rustic, Sap, &amp; Clean Cherry finishes shown here</p>
  </div>
  <div class="hard-maple-stains-div wood-swatch-div">
    <p>Hard Maple finishes shown here</p>
  </div>
  <div class="hickory-stains-div rustic-hickory-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Hickory finishes shown here</p>
  </div>
  <div class="rustic-quartersawn-white-oak-stains-div quartersawn-white-oak-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Quartersawn White Oak finishes shown here</p>
  </div>
  <div class="rustic-walnut-stains-div walnut-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Walnut finishes shown here</p>
  </div>
</div>

I have created a fiddle for reference.