How to auto check radio button basis of two radio button groups-CodePudding

 <div class="product_colors">     
        <span class="header" style="display:block;">Color</span>              
                             
          <label class="color_label active">   
          <input type="radio" name="product_color" value="gold" >Gold                           
          <span style="""></span>                  
          </label>
                         
          <label class="color_label">   
          <input type="radio" name="product_color" value="rose gold">Rose Gold                         
          <span style="" data-title="rose gold"></span>                  
          </label>
                        
          <label class="color_label">   
          <input type="radio" name="product_color" value="silver" > Silver                            
          <span style="" data-title="silver"></span>                  
          </label>                           
      </div>

      <div class="product_stones">
        <span class="header" style="display:block;">Stone</span>
           
        <label class="stone_label">
          <input type="radio" name="product_stone" value="malachite" >malachite         
        </label>          

        <label class="stone_label active">
          <input type="radio" name="product_stone" value="tiger-eye" > tiger-eye        
        </label>
          
        <label class="stone_label">
          <input type="radio" name="product_stone" value="black" > black           
        </label>

        <label class="stone_label">
          <input type="radio" name="product_stone" value="blue" > blue         
        </label>
          
      </div>

      <div class="combination">
          Combination
        <div class="hidden">             
            <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite        
            <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye         
            <input type="radio" name="combination"  class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black          
             <input type="radio" name="combination"  class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue             
          
          </div>
      </div>

here is my output image
I want to change combination radio button value to be select automatically on the basis of selected color and stone. Can someone help me to get rid of this problem.
Here is my code I've tried everything but I am new in JS so I can't find solution of this problem

Color Gold Rose Gold Silver

  <div class="product_stones">
    <span class="header" style="display:block;">Stone</span>
       
    <label >
      <input type="radio" name="product_stone" value="malachite" >malachite         
    </label>          

    <label >
      <input type="radio" name="product_stone" value="tiger-eye" > tiger-eye        
    </label>
      
    <label >
      <input type="radio" name="product_stone" value="black" > black           
    </label>

    <label >
      <input type="radio" name="product_stone" value="blue" > blue         
    </label>
      
  </div>

  <div >
      Combination
    <div >             
        <input type="radio" name="combination"  data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite        
        <input type="radio" name="combination"  data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye         
        <input type="radio" name="combination"   data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black          
         <input type="radio" name="combination"   data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue             
      
      </div>
  </div>

CodePudding user response：

You need some jQuery to achieve this

<script>
    $(document).ready(function() {
        $('.product_description').click(function() {
            var color = $('input[name="product_color"]:checked').val();
            var stone = $('input[name="product_stone"]:checked').val();
            var combinationClass = color   "-"   stone
            if ($('.'   combinationClass).length) {
                $('.'   combinationClass).attr('checked', true)
            } else {
                //If the class name of the combination is not found
                alert("something went wrong");
            }

        });

    });
</script>

HTML Code

<!--
   # Added common class for all the stone and colour radio buttons to enable trigger
   # Added Class based on the colour and stone value in the combination
   # Added checked attribute to stone and colour radio buttons for on Load default selection
-->
<div >
    <span  style="display:block;">Color</span>
    <label >
        <input type="radio"  name="product_color" value="gold" checked>Gold
        <span></span>
    </label>

    <label >
        <input type="radio"  name="product_color" value="rose-gold">Rose Gold
        <span data-title="rose gold"></span>
    </label>

    <label >
        <input type="radio"  name="product_color" value="silver"> Silver
        <span data-title="silver"></span>
    </label>
</div>

<div >
    <span  style="display:block;">Stone</span>

    <label >
        <input type="radio"  name="product_stone" value="malachite" checked>malachite
    </label>

    <label >
        <input type="radio"  name="product_stone" value="tiger-eye"> tiger-eye
    </label>

    <label >
        <input type="radio"  name="product_stone" value="black"> black
    </label>

    <label >
        <input type="radio"  name="product_stone" value="blue"> blue
    </label>

</div>

<div >
    Combination
    <div >
        <input type="radio" name="combination"  data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
        <input type="radio" name="combination"  data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
        <input type="radio" name="combination"  data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
        <input type="radio" name="combination"  data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue

    </div>
</div>

CodePudding user response：

Here is another solution I've tried which is not edit HTML. My solution is going to find combination radio button that has proper data-color and data-stone

$("input[name^='product_']").on('change', (e) => {
  $("input[name='combination']").prop('checked', false);
  var productColor = $("input[name='product_color']:checked").val();
  var productStone = $("input[name='product_stone']:checked").val();

  if (productColor !== undefined && productStone !== undefined) {
    if ($(`input[data-color='${productColor}'][data-stone='${productStone}']`).length) {
      $(`input[data-color='${productColor}'][data-stone='${productStone}']`).trigger('click');
    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product_colors">
  <span class="header" style="display:block;">Color</span>

  <label class="color_label active">   
          <input type="radio" name="product_color" value="gold" >Gold                           
          <span style="""></span>                  
          </label>

  <label class="color_label">   
          <input type="radio" name="product_color" value="rose gold">Rose Gold                         
          <span style="" data-title="rose gold"></span>                  
          </label>

  <label class="color_label">   
          <input type="radio" name="product_color" value="silver" > Silver                            
          <span style="" data-title="silver"></span>                  
          </label>
</div>

<div class="product_stones">
  <span class="header" style="display:block;">Stone</span>

  <label class="stone_label">
          <input type="radio" name="product_stone" value="malachite" >malachite         
        </label>

  <label class="stone_label active">
          <input type="radio" name="product_stone" value="tiger-eye" > tiger-eye        
        </label>

  <label class="stone_label">
          <input type="radio" name="product_stone" value="black" > black           
        </label>

  <label class="stone_label">
          <input type="radio" name="product_stone" value="blue" > blue         
        </label>

</div>

<div class="combination">
  Combination
  <div class="hidden">
    <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
    <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
    <input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
    <input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue

  </div>
</div>