如何自动检查两个单选按钮组的单选按钮基础

Question

 <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
我想根据 selected 颜色和石头自动将组合单选按钮值更改为 select。谁能帮我解决这个问题。
这是我的代码，我已经尝试了所有方法，但我是 JS 的新手，所以我找不到这个问题的解决方案

颜色金子玫瑰金银

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

Answer 1

你需要一些 jQuery 来实现这个

<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代码

<!--
   # 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 class="product_colors">
    <span class="header" style="display:block;">Color</span>
    <label class="color_label">
        <input type="radio" class="product_description" name="product_color" value="gold" checked>Gold
        <span></span>
    </label>

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

    <label class="color_label">
        <input type="radio" class="product_description" name="product_color" value="silver"> Silver
        <span 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" class="product_description" name="product_stone" value="malachite" checked>malachite
    </label>

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

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

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

</div>

<div class="combination">
    Combination
    <div class="hidden">
        <input type="radio" name="combination" class="hidden_wrap gold-malachite" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
        <input type="radio" name="combination" class="hidden_wrap gold-toger-eye" 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 rose-gold-black" 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 silver-blue" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue

    </div>
</div>

Answer 2

这是我试过的另一种解决方案，它不是编辑 HTML。我的解决方案是找到具有适当 data-color 和 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>

如何自动检查两个单选按钮组的单选按钮基础

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

javascript

jquery

shopify