本文介绍在无法修改 html 结构的前提下，使用 jquery 动态隐藏单选按钮（radio）后紧邻的文本内容（如“zelfde als bij 'uw gegevens'”和“ander adres”），同时联动控制关联表单字段的显隐状态。
本文介绍在无法修改 html 结构的前提下，使用 jquery 动态隐藏单选按钮（radio）后紧邻的文本内容（如“zelfde als bij 'uw gegevens'”和“ander adres”），同时联动控制关联表单字段的显隐状态。
在实际表单开发中，常遇到「HTML 不可编辑，仅允许通过 JS/CSS 实现交互逻辑」的约束场景。本例中，目标是：当用户选择「Naar luchthaven brengen: Nee」时，隐藏整个 item_35317 单选组（包括其 <label> 及其后显示的选项文本）；而当用户在 item_35317 中选择「Ander adres」时，则显示地址输入字段（item_35175–item_35177）。关键难点在于：原生 HTML 中单选按钮后的文本不属于任何标签元素，而是直接作为 input 元素的兄弟文本节点存在，无法被 CSS 或常规选择器直接定位和控制。
解决方案的核心是：用 JavaScript 将这些游离文本包裹进带类名的 <span>，再统一通过类名进行显隐控制。以下是完整、健壮的实现步骤：
✅ 步骤 1：封装游离文本（关键预处理）
// 为每个 radio 后的文本添加 .toggle-label 包裹，便于后续统一操作
$('.mx_form_input_option input[type="radio"]').each(function() {
const nextNode = this.nextSibling;
// 过滤空白文本节点，只包装有意义的文本
if (nextNode && nextNode.nodeType === Node.TEXT_NODE && nextNode.textContent.trim()) {
$(nextNode).wrap('<span class="toggle-label"></span>');
}
});此步确保所有选项文字（如 "Zelfde als bij 'Uw gegevens'"）被包裹为 <span class="toggle-label">…</span>，从而获得可选中、可样式化、可批量控制的 DOM 节点。
✅ 步骤 2：定义可复用的显隐逻辑（解耦与复用）
为避免重复代码、提升可维护性，我们采用 自定义事件 hideShowMe 封装显隐行为：
立即学习“Java免费学习笔记（深入）”；
// 绑定自定义事件处理器
$("input[name='item_35174'], input[name='item_35317']")
.on('hideShowMe', function(event, show, $showEls, $hideEls) {
$showEls.toggle(show);
$hideEls.toggle(!show);
// 同时控制同属一行的 .toggle-label 文本
$showEls.closest('.mx_form_row').find('.toggle-label').toggle(show);
});该处理器接收布尔值 show 及两组 jQuery 对象：需显示的元素 $showEls 和需隐藏的元素 $hideEls，并自动同步其所在行中的 .toggle-label 文本状态。
✅ 步骤 3：绑定业务级 change 事件
// 控制 item_35174（主开关）：选 "Ja" (value="0") → 显示 item_35317 组；否则隐藏
$("input[name='item_35174']").on('change', function() {
const shouldShowGroup = this.value === "0";
const $group = $("label[for=item_35317], input[type=radio][name=item_35317]");
const $addressFields = $(
"label[for=item_35175], #item_35175," +
"label[for=item_35176], #item_35176," +
"label[for=item_35177], #item_35177"
);
$(this).trigger('hideShowMe', [shouldShowGroup, $group, $addressFields]);
// 确保子选项状态同步更新（触发其 change）
$('input[type=radio][name=item_35317]:checked').trigger('change');
});
// 控制 item_35317（子开关）：仅当选 "Ander adres" (value="1") 时显示地址字段
$("input[name='item_35317']").on('change', function() {
const shouldShowAddress = this.value === "1";
const $addressFields = $(
"label[for=item_35175], #item_35175," +
"label[for=item_35176], #item_35176," +
"label[for=item_35177], #item_35177"
);
$(this).trigger('hideShowMe', [shouldShowAddress, $addressFields, $()]);
});✅ 步骤 4：初始化状态（页面加载时生效）
// 设置默认选中项，并触发初始状态
$("input[name=item_35174][value='1']").prop('checked', true);
// 批量触发已选中的 radio 的 change 事件，驱动初始显隐
$("input[name='item_35174']:checked, input[name='item_35317']:checked")
.trigger('change');⚠️ 注意事项与最佳实践
- 文本节点识别安全：.nextSibling 可能返回空格/换行等 Text 节点，务必校验 nodeType === Node.TEXT_NODE 且 textContent.trim() 非空。
- 性能考虑：closest('.mx_form_row') 利用了语义化容器结构，比全局查找更高效、更健壮。
-
CSS 辅助（可选）：可添加调试样式快速验证包裹效果：
.toggle-label { background: #f0f9ff; padding: 2px 4px; border-radius: 3px; } - 兼容性：本方案基于 jQuery 3.3+，若需原生 JS 版本，可用 Element.nextElementSibling + Text.splitText() 替代，但复杂度显著上升。
通过以上结构化设计，不仅精准解决了「隐藏 radio 后文本」这一典型 DOM 操作难题，更构建了可扩展、易维护的表单条件显示体系——无论后续新增多少联动字段，只需复用 hideShowMe 事件即可无缝集成。
