本文介绍在无法修改 html 结构的前提下，通过 jquery 和 css 精准控制单选按钮（radio）后跟随的文本标签（如“zelfde als bij 'uw gegevens'”和“ander adres”）的显示与隐藏逻辑，实现响应式表单交互。
本文介绍在无法修改 html 结构的前提下，通过 jquery 和 css 精准控制单选按钮（radio）后跟随的文本标签（如“zelfde als bij 'uw gegevens'”和“ander adres”）的显示与隐藏逻辑，实现响应式表单交互。
在实际表单开发中，常遇到「HTML 不可修改，仅允许用 JS/CSS 控制行为」的约束场景。本例中，用户希望：当主选项 item_35174 选择“Nee”（value="1"）时，不仅隐藏 item_35317 整个单选组（含 <label> 和 <input>），还需同步隐藏其选项文本（即“Zelfde als bij 'Uw gegevens'”和“Ander adres”）；而当 item_35317 选择“Ander adres”（value="1"）时，则显示地址字段及其对应 <label>。
关键难点在于：原生 HTML 中，单选按钮后的文本是紧邻 <input> 的文本节点（text node），无法直接用 CSS 类或 ID 选择，label[for=...] 也无法覆盖该文本内容。因此，需借助 jQuery 将这些文本节点包裹进语义化容器，再统一控制。
✅ 解决方案：动态封装 + 自定义事件驱动
核心思路分三步：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 预处理 DOM：遍历所有 .mx_form_input_option input，将其后继文本节点用 <span class="toggle-label"> 包裹；
- 抽象状态逻辑：定义自定义事件 hideShowMe，接收布尔值 isTrue 及待显隐的 jQuery 集合 $showAssociates / $hideAssociates；
- 解耦交互逻辑：将 item_35174 和 item_35317 的 change 事件统一委托给 hideShowMe，避免重复代码。
以下是完整、健壮的实现代码：
// 步骤1：封装 radio 后的文本为可操作元素
$('.mx_form_input_option input').each(function() {
const nextNode = this.nextSibling;
if (nextNode && nextNode.nodeType === Node.TEXT_NODE && nextNode.nodeValue.trim()) {
$(nextNode).wrap('<span class="toggle-label"></span>');
}
});
// 步骤2：定义可复用的显隐逻辑（支持 label + input + 文本 span）
$("input[name='item_35174'], input[name='item_35317']")
.on('hideShowMe', function(event, isTrue, $showAssociates, $hideAssociates) {
// 显示/隐藏目标元素
$showAssociates.toggle(isTrue);
$hideAssociates.toggle(!isTrue); // 注意：此处统一设为 false 更安全，见下方说明
// 同步控制同级 .toggle-label 文本
$showAssociates.closest('.mx_form_row').find('.toggle-label').toggle(isTrue);
});
// 步骤3：绑定主控逻辑
$("input[name='item_35174']").on('change', function() {
const isShowItem35317 = (this.value === "0"); // 选 "Ja" → 显示 item_35317 组
const $showGroup = $("label[for=item_35317], input[type='radio'][name='item_35317']");
const $hideAddressFields =
$("label[for=item_35175], #item_35175")
.add("label[for=item_35176], #item_35176")
.add("label[for=item_35177], #item_35177");
$(this).trigger('hideShowMe', [isShowItem35317, $showGroup, $hideAddressFields]);
// 触发子项 change 以同步其内部状态（如初始选中项）
$('input[type="radio"][name="item_35317"]:checked').trigger('change');
});
$("input[name='item_35317']").on('change', function() {
const isShowAddressFields = (this.value === "1"); // 选 "Ander adres" → 显示地址字段
const $showFields =
$("label[for=item_35175], #item_35175")
.add("label[for=item_35176], #item_35176")
.add("label[for=item_35177], #item_35177");
$(this).trigger('hideShowMe', [isShowAddressFields, $showFields, $()]);
});
// 步骤4：初始化状态（页面加载时触发）
$("input[name='item_35174']:checked, input[name='item_35317']:checked").trigger('change');⚠️ 注意事项与最佳实践
- 文本节点安全封装：.each() 中增加了 nodeType === Node.TEXT_NODE 和 trim() 判断，避免空格、换行等无效节点被误包；
- $hideAssociates 处理建议：示例中采用 $hideAssociates.toggle(false) 而非 toggle(!isTrue)，确保每次调用都明确隐藏——避免因多次触发导致状态错乱；
- 性能优化：使用 .add() 链式合并选择器，比多次 $() 查询更高效；closest('.mx_form_row') 确保精准定位父容器，不污染全局；
- CSS 辅助（可选）：可添加 .toggle-label { display: inline; } 消除默认 span 换行影响，或通过 visibility: hidden 替代 display: none 保留布局空间。
该方案完全满足「零 HTML 修改」要求，逻辑清晰、扩展性强——未来新增同类控件，只需复用 hideShowMe 事件并传入对应选择器即可。
