如何使用JS根据表单其他字段输入值动态展示对应字段集

1. 前置调整：优化HTML结构与基础样式 #

首先统一所有子女信息组的类名，添加默认隐藏的样式，你也可以根据需求调整样式规则：

/* 所有子女信息组默认隐藏 */
.child-group {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}
/* 符合展示条件的组激活显示 */
.child-group.active {
  display: block;
}

调整原有子女字段集的结构，给每个子女对应的字段集加上统一的child-group类，id不要用纯数字，规范命名如下（如果需要支持2个及以上子女，按照规则新增对应字段组即可）：

<!-- 第一个子女信息组 -->
<div id="child-1" class="child-group child_1">
  <div class="_form_element _field51 _full_width " >
    <label for="field[51]" class="_form-label">
      第一个子女姓名
    </label>
    <div class="_field-wrapper">
      <input type="text" id="field[51]" name="field[51]" value="" placeholder="" />
    </div>
  </div>
  <div class="_form_element _field55 _full_width " >
    <label for="field[55]" class="_form-label">
      第一个子女出生日期
    </label>
    <div class="_field-wrapper">
      <input type="date" class="date_field" id="field[55]" name="field[55]" value="" placeholder=""  />
    </div>
  </div>
</div>

<!-- 第二个子女信息组（需要支持2个子女时新增） -->
<div id="child-2" class="child-group child_2">
  <div class="_form_element _field52 _full_width " >
    <label for="field[52]" class="_form-label">
      第二个子女姓名
    </label>
    <div class="_field-wrapper">
      <input type="text" id="field[52]" name="field[52]" value="" placeholder="" />
    </div>
  </div>
  <div class="_form_element _field56 _full_width " >
    <label for="field[56]" class="_form-label">
      第二个子女出生日期
    </label>
    <div class="_field-wrapper">
      <input type="date" class="date_field" id="field[56]" name="field[56]" value="" placeholder=""  />
    </div>
  </div>
</div>

你也可以将触发字段（子女数量输入框）的类型修改为number，添加min="0"属性，限制用户只能输入非负整数，减少非法输入的处理成本。

2. 核心逻辑：添加JavaScript控制代码 #

将以下代码添加到页面底部，或者在DOM加载完成后执行即可：

// 获取子女数量输入框元素
const childCountInput = document.getElementById('field[10]');
// 获取所有子女信息组
const childGroups = document.querySelectorAll('.child-group');

// 监听输入框值变化事件
childCountInput.addEventListener('input', function() {
  // 处理输入值，非法输入默认转为0
  const inputCount = this.value.trim();
  const count = /^\d+$/.test(inputCount) ? parseInt(inputCount) : 0;

  // 遍历所有子女组，控制显隐
  childGroups.forEach((group, index) => {
    // 组的序号从1开始计数
    const groupNo = index + 1;
    if (groupNo <= count) {
      group.classList.add('active');
    } else {
      group.classList.remove('active');
      // 隐藏时清空该组内的输入内容，不需要可删除以下两行
      group.querySelectorAll('input, select, textarea').forEach(input => {
        input.value = '';
      });
    }
  });
});

扩展说明 #

如果后续需要支持更多子女数量，只需要按照child-3、child-4的命名规则新增对应字段组结构即可，JS逻辑无需修改。如果不需要清空隐藏组的输入内容，删除JS中清空输入的代码段即可。

内容的提问来源于stack exchange，提问作者Elina Zois