本文旨在提供一个清晰简洁的教程，讲解如何使用 jQuery 根据单选按钮的选择状态，动态地显示或隐藏表单中的特定字段。通过事件委托和 toggle() 方法，我们可以轻松实现这一功能，并确保表单的验证规则也随之更新，从而提升用户体验。
动态显示/隐藏字段的实现
在 Web 开发中，经常需要根据用户的选择动态地显示或隐藏某些表单字段。这可以简化表单的复杂度，并提高用户体验。以下是如何使用 jQuery 实现这一功能的步骤：
1. HTML 结构
首先，我们需要一个包含单选按钮和需要动态显示/隐藏的字段的 HTML 结构。例如：
在这个例子中，policeDetailsGroup 包含一个文本输入框，默认情况下是隐藏的 (style="display: none;")。 我们希望当用户选择“是”时显示这个输入框，选择“否”时隐藏它。
2. jQuery 代码
接下来，我们需要编写 jQuery 代码来实现动态显示/隐藏的功能。 关键在于使用事件委托和 toggle() 方法。
$(function() {
var policeInvolvedYes = $('input[name="policeInvolved"][value="yes"]');
var policeDetailsGroup = $('#policeDetailsGroup');
var policeDetails = $('#policeDetails');
const updatePoliceDetailsField = () => {
const show = policeInvolvedYes.is(':checked');
policeDetailsGroup.toggle(show);
policeDetails.prop('required', show);
};
$('.radio').on('change', '[name=policeInvolved]', updatePoliceDetailsField)
updatePoliceDetailsField()
});这段代码做了以下几件事：
- 选择器： 使用 jQuery 选择器获取相关的元素，例如单选按钮和要显示/隐藏的 div。
- updatePoliceDetailsField 函数： 这个函数检查 policeInvolvedYes 单选按钮是否被选中。如果是，则使用 policeDetailsGroup.toggle(show) 显示 policeDetailsGroup，否则隐藏它。toggle(show) 根据布尔值 show 来显示或隐藏元素。 如果 show 为 true，则显示元素；如果 show 为 false，则隐藏元素。 同时，使用 policeDetails.prop('required', show) 设置或取消设置输入框的 required 属性，以确保表单验证的正确性。
- 事件委托： 使用 .radio.on('change', '[name=policeInvolved]', updatePoliceDetailsField)将change事件监听器绑定到.radio元素上，并委托给[name=policeInvolved]` 元素。 这样做的好处是，即使动态添加了单选按钮，事件监听器仍然有效。
- 初始状态： 在 $(function() { ... }); 内部，调用 updatePoliceDetailsField() 函数一次，以设置页面加载时的初始状态。
3. 引入 jQuery 库
确保在 HTML 文件中引入 jQuery 库。 可以使用 CDN 链接：
注意事项
- CSS display 属性： toggle() 方法会改变元素的 CSS display 属性。 如果元素有其他的 CSS 样式影响了 display 属性，可能会导致显示/隐藏效果不符合预期。
- 表单验证： 在显示/隐藏字段的同时，需要更新表单的验证规则，以确保用户提交的数据是有效的。 使用 prop('required', true) 和 prop('required', false) 可以动态地设置或取消设置 required 属性。
- 事件委托： 如果动态添加了单选按钮，使用事件委托可以确保事件监听器仍然有效。
- 代码可读性： 将逻辑封装到函数中，可以提高代码的可读性和可维护性。
总结
通过使用 jQuery 的 toggle() 方法和事件委托，我们可以轻松地实现条件显示/隐藏字段的功能。 这种方法可以简化表单的复杂度，并提高用户体验。 记住要同时更新表单的验证规则，以确保用户提交的数据是有效的。
