jQuery Academy · 课时

动态操作表单字段

Q: 「动态操作表单字段」这节课中我会学到什么？

学习根据用户输入动态添加、删除和修改表单字段，使用 jQuery 创建灵活且交互性强的表单界面。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习根据用户输入动态添加、删除和修改表单字段，使用 jQuery 创建灵活且交互性强的表单界面。

动态操作表单字段 是 CoddyKit 上的免费 jQuery Academy 课时。这是第 1 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

动态表单：原因与方法

表单通常是静态的，但现代 Web 应用依赖交互性。动态表单字段操作允许您实时更改表单结构。

这意味着用户与页面交互时，您可以添加、删除或修改输入字段。这样可以带来更好的用户体验和更灵活的表单！

添加字段：基础知识

添加字段的核心理念是创建新的 HTML 元素，并将它们插入文档对象模型（DOM）。

使用 jQuery 创建元素（例如 $('')）。
使用 .append()、.prepend()、.after() 或 .before() 等方法，将它们准确放置在表单中的指定位置。
请记得为新字段设置适当的 name 属性，尤其是在需要进行后端处理时。

添加新的电子邮件输入框

让我们添加一个按钮，点击后即可生成新的电子邮件输入字段。请注意，我们先创建 HTML 字符串，然后将其添加进去。

<div id="email-fields">
  <input type="email" name="email[]" placeholder="Email 1">
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;
  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailField = `
      <input type="email" name="email[]" 
             placeholder="Email ${emailCount}">
    `;
    $('#email-fields').append(newEmailField);
  });
});
</script>

删除字段：清理

正如用户可能需要添加字段一样，他们也经常需要删除字段。这样可以使表单保持简洁，并符合他们的需求。

jQuery 的 .remove() 方法非常适合完成此操作。它会将选中的元素从 DOM 中完全移除，同时移除相关的数据和事件处理程序。

删除特定输入框

现在，让我们扩展之前的示例。在每个电子邮件字段旁边添加一个“删除”按钮。点击它即可删除对应的字段。

重要提示：请注意我们如何处理动态添加的“删除”按钮的事件！

<div id="email-fields">
  <div class="email-group">
    <input type="email" name="email[]" placeholder="Email 1">
    <button class="remove-email">Remove</button>
  </div>
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;

  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailGroup = `
      <div class="email-group">
        <input type="email" name="email[]" 
               placeholder="Email ${emailCount}">
        <button class="remove-email">Remove</button>
      </div>
    `;
    $('#email-fields').append(newEmailGroup);
  });

  // Event delegation for remove buttons
  $('#email-fields').on('click', '.remove-email', function() {
    $(this).parent('.email-group').remove();
  });
});
</script>

修改字段：调整属性

有时您不需要添加或删除字段，只需更改其属性即可。这些属性可能是 value、placeholder、disabled 状态，甚至是 name 或 id。

jQuery 提供了用于 HTML 属性的 .attr()，以及用于 DOM 属性的 .prop()。对于 checked、disabled 或 selected 等布尔属性，通常更推荐使用 .prop()。

切换字段状态

下面是一个复选框控制文本输入框启用或禁用的示例。我们使用 .prop() 更改 disabled 属性。

<label>
  <input type="checkbox" id="enable-input"> Enable Input
</label>
<input type="text" id="my-input" value="Hello" disabled>

<script>
$(document).ready(function() {
  $('#enable-input').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('#my-input').prop('disabled', !isChecked); // Set disabled based on checkbox state
  });
});
</script>

动态元素上的事件

一个常见的陷阱是：直接绑定的事件处理程序（例如 $('#myButton').on('click', ...)）只会绑定到页面加载时已经存在的元素。

对于动态添加的元素，您需要使用事件委托。也就是说，将事件监听器绑定到静态的父元素上，然后为动态子元素指定选择器。jQuery 的 .on() 方法可以出色地处理这一过程。

“添加更多”实践示例

结合我们学到的内容，下面是一个常见模式：添加技能按钮允许用户列出多项技能，并为每项技能提供一个“删除”按钮。

请注意 data-id 用于唯一标识，以及 .closest() 用于查找要删除的父元素。

<div id="skill-list">
  <div class="skill-item" data-id="1">
    <input type="text" name="skill[]" placeholder="Skill 1">
    <button class="remove-skill">Remove</button>
  </div>
</div>
<button id="add-skill">Add Skill</button>

<script>
$(document).ready(function() {
  let skillId = 1; // Unique ID for each skill item

  $('#add-skill').on('click', function() {
    skillId++;
    const newSkillItem = `
      <div class="skill-item" data-id="${skillId}">
        <input type="text" name="skill[]" 
               placeholder="Skill ${skillId}">
        <button class="remove-skill">Remove</button>
      </div>
    `;
    $('#skill-list').append(newSkillItem);
  });

  // Event delegation for remove buttons
  $('#skill-list').on('click', '.remove-skill', function() {
    // Prevent removing the very first skill if desired
    if ($('.skill-item').length > 1) {
      $(this).closest('.skill-item').remove();
    } else {
      alert("You need at least one skill!");
    }
  });
});
</script>

动态表单检查

测试您对动态表单操作的理解。

总结：动态表单

在本课中，您学习了如何使用 jQuery 动态添加、删除和修改字段，让表单更具交互性且更易于使用。

使用 .append()、.prepend()、.after()、.before() 添加元素。
使用 .remove() 删除元素。
使用 .attr() 和 .prop() 修改元素的属性。
尤其要注意：对于初始页面加载后添加到 DOM 中的元素，应结合 .on() 使用事件委托来处理事件。

接下来，我们将深入学习客户端表单验证！

常见问题解答

「动态操作表单字段」课时是免费的吗？

是的 — 「动态操作表单字段」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「动态操作表单字段」这节课中我会学到什么？

学习根据用户输入动态添加、删除和修改表单字段，使用 jQuery 创建灵活且交互性强的表单界面。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 3 节。

「动态操作表单字段」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 jQuery Academy