当前位置：首页 > 文章列表 > 文章 > 前端 > jQuery条件显示隐藏字段教程

jQuery条件显示隐藏字段教程

2025-10-12 11:54:32 0浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《jQuery实现条件显示隐藏字段教程》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

使用 jQuery 实现条件显示/隐藏字段

本文旨在提供一个清晰简洁的教程，讲解如何使用 jQuery 根据单选按钮的选择状态，动态地显示或隐藏表单中的特定字段。通过事件委托和 toggle() 方法，我们可以轻松实现这一功能，并确保表单的验证规则也随之更新，从而提升用户体验。

动态显示/隐藏字段的实现

在 Web 开发中，经常需要根据用户的选择动态地显示或隐藏某些表单字段。这可以简化表单的复杂度，并提高用户体验。以下是如何使用 jQuery 实现这一功能的步骤：

1. HTML 结构

首先，我们需要一个包含单选按钮和需要动态显示/隐藏的字段的 HTML 结构。例如：

<div class="form-group">
  <label>是否涉及警察/紧急服务？</label>
  <div class="radio">
    <label>
      &lt;input type=&quot;radio&quot; name=&quot;policeInvolved&quot; value=&quot;yes&quot;&gt; 是
    </label>
  </div>
  <div class="radio">
    <label>
      &lt;input type=&quot;radio&quot; name=&quot;policeInvolved&quot; value=&quot;no&quot;&gt; 否
    </label>
  </div>
</div>

<div id="policeDetailsGroup" style="display: none;">
  <label>如果选择“是”，请详细说明：
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;policeDetails&quot; name=&quot;policeDetails&quot; placeholder=&quot;请输入详细信息&quot;&gt;</label>
</div>

在这个例子中，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 链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

注意事项

CSS display 属性： toggle() 方法会改变元素的 CSS display 属性。如果元素有其他的 CSS 样式影响了 display 属性，可能会导致显示/隐藏效果不符合预期。
表单验证： 在显示/隐藏字段的同时，需要更新表单的验证规则，以确保用户提交的数据是有效的。使用 prop('required', true) 和 prop('required', false) 可以动态地设置或取消设置 required 属性。
事件委托： 如果动态添加了单选按钮，使用事件委托可以确保事件监听器仍然有效。
代码可读性： 将逻辑封装到函数中，可以提高代码的可读性和可维护性。