如何实现单选框分组关联相同选项显示（jQuery）

AI 小北

2026-8-1

问题解决：木材单选框与饰面分区的联动显示

需求说明

实现木材单选框选择与饰面分区的联动：选中某一木材选项时，仅显示对应的饰面分区，隐藏其他分区；部分木材（如Cherry、Sap Cherry、Rustic Cherry）需共享同一个饰面分区。无法修改插件生成的HTML结构，只能基于现有结构调整JS脚本。

原实现代码

原JavaScript脚本

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);
    });
  });
});

对应HTML结构

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

用户尝试的映射版本（未成功）

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);
    });
  });
});

问题分析

原代码和尝试的映射版本存在两个核心问题：

多次绑定change事件：遍历所有木材类型时，每个类型都给单选框绑定一次change事件，导致事件触发时多个逻辑冲突执行，出现显示/隐藏混乱。
逻辑判断冗余：每次事件触发时，所有木材对应的判断都会执行，导致饰面分区的显示状态被多次覆盖。

修正后的解决方案

只绑定一次change事件，在事件回调中根据选中的木材值匹配对应的饰面分区：

jQuery(function($) {
  // 页面加载时先隐藏所有饰面分区
  $(".wood-swatch-div").hide();

  // 定义木材类型到饰面分区的映射关系
  const woodToStainMap = {
    'Oak': '.oak-stains-div',
    'Brown Maple': '.brown-maple-stains-div',
    'Wormy Maple': '.brown-maple-stains-div',
    'Cherry': '.cherry-stains-div',
    'Sap Cherry': '.cherry-stains-div',
    'Rustic Cherry': '.cherry-stains-div',
    'Hickory': '.hickory-stains-div',
    'Rustic Hickory': '.hickory-stains-div',
    'Hard Maple': '.hard-maple-stains-div',
    'Quartersawn White Oak': '.quartersawn-white-oak-stains-div',
    'Rustic Quartersawn White Oak': '.quartersawn-white-oak-stains-div',
    'Walnut': '.walnut-stains-div',
    'Rustic Walnut': '.walnut-stains-div'
  };

  // 只绑定一次change事件
  $('#wood-choices input[type="radio"]').on('change', function() {
    // 从选中值中提取木材名称（去掉末尾的_数字）
    const selectedWood = $(this).val().split('_')[0];
    // 获取对应的饰面选择器
    const targetSelector = woodToStainMap[selectedWood];

    // 隐藏所有分区，再显示目标分区
    $(".wood-swatch-div").hide();
    $(targetSelector).show();

    // 清除其他分区内的单选框选中状态（如果有的话）
    $(".wood-swatch-div").not(targetSelector).find("input[type='radio']").prop("checked", false);
  });

  // 初始化：如果页面加载时有默认选中的单选框，触发一次change事件
  $('#wood-choices input[type="radio"]:checked').trigger('change');
});

代码说明

初始化隐藏：页面加载时先隐藏所有饰面分区，避免初始状态混乱。
单一事件绑定：只给单选框绑定一次change事件，避免多次绑定导致的逻辑冲突。
映射关系清晰：通过对象定义木材到饰面的映射，便于后续维护修改。
值提取逻辑：从单选框的value中拆分出木材名称（因为value格式是木材名_数字），匹配映射中的键。
统一显示/隐藏逻辑：每次触发事件时，先隐藏所有分区，再显示目标分区，确保状态唯一。
初始化触发：如果页面有默认选中的单选框，自动触发change事件，显示对应饰面。

内容的提问来源于stack exchange，提问作者ADF

如何实现单选框分组关联相同选项显示（jQuery）

需求说明 #

原实现代码 #

原JavaScript脚本 #

对应HTML结构 #

用户尝试的映射版本（未成功） #

问题分析 #

修正后的解决方案 #

代码说明 #