本文旨在提供一个简洁高效的解决方案，利用 jQuery 根据单选按钮的选择动态显示或隐藏特定字段。通过监听单选按钮的 change 事件，并结合 toggle() 方法，可以轻松实现字段的显示与隐藏，同时动态设置字段的 required 属性，确保表单的有效性。
动态显示/隐藏字段的实现
在 Web 开发中，经常需要根据用户的选择动态显示或隐藏某些字段。例如，当用户选择“是”时，显示一个额外的字段，当用户选择“否”时，隐藏该字段。 使用 jQuery 可以轻松实现这个功能。
HTML 结构
首先，需要定义 HTML 结构。这里使用单选按钮来控制一个文本输入框的显示与隐藏。
jQuery 代码
接下来，使用 jQuery 来实现字段的显示与隐藏。
网趣网上购物系统旗舰版
下载
网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。
$(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()
});代码解释
-
选择器：
- $('input[name="policeInvolved"][value="yes"]')：选择 name 属性为 policeInvolved 且 value 属性为 yes 的单选按钮。
- $('#policeDetailsGroup')：选择 id 属性为 policeDetailsGroup 的元素（需要显示/隐藏的字段的容器）。
- $('#policeDetails')：选择 id 属性为 policeDetails 的元素（需要显示/隐藏的字段）。
-
updatePoliceDetailsField 函数：
- policeInvolvedYes.is(':checked')：检查 yes 单选按钮是否被选中。
- policeDetailsGroup.toggle(show)：根据 show 变量的值，显示或隐藏 policeDetailsGroup 元素。toggle() 方法会切换元素的显示状态。
- policeDetails.prop('required', show)：根据 show 变量的值，设置 policeDetails 元素的 required 属性。如果 show 为 true，则将 required 属性设置为 true，否则设置为 false。
-
事件监听：
- $('.radio').on('change', '[name=policeInvolved]', updatePoliceDetailsField)：将 updatePoliceDetailsField 函数绑定到 change 事件。这里使用了事件委托，将事件绑定到 .radio 元素上，然后监听其子元素中 name 属性为 policeInvolved 的元素的 change 事件。 这样可以动态地处理单选按钮的选择。
- updatePoliceDetailsField()：在页面加载时，立即执行 updatePoliceDetailsField 函数，以确保字段的初始状态与单选按钮的选择一致。
注意事项
- 确保引入 jQuery 库。
- policeDetailsGroup 初始状态设置为 display: none;，这样默认情况下字段是隐藏的。
- policeDetails.prop('required', show) 动态设置 required 属性，确保在显示字段时，表单验证能够正常工作。
总结
通过使用 jQuery，可以方便地实现字段的动态显示与隐藏。 这种方法简洁高效，并且可以很容易地扩展到更复杂的场景中。 使用 toggle() 方法可以轻松切换元素的显示状态，而 prop() 方法可以动态设置元素的属性。结合事件委托，可以更好地处理动态添加的元素。
