如何在所有active-q内输入框填满后显示下一个fieldset

首先，咱们得先明确问题核心：现有代码是全局检查所有输入框，没有区分不同的fieldset，而且没处理不同输入类型（单选、复选框）的填写判断，也没关联到下一个fieldset的显示逻辑。咱们一步步来改：

1. 先调整HTML结构 #

给每个fieldset加个统一的类（比如form-step），并且默认隐藏除第一个之外的fieldset，这样初始状态更合理：

<fieldset class="form-step active">
  test fieldset 1
  <form>
    <div class="row active-q"> test 1 <input type="text"> </div>
    <div class="row active-q"> test 2 <input type="text"> </div>
    <div class="row active-q"> test 3 <input type="text"> </div>
  </form>
</fieldset>
<fieldset class="form-step">
  test fieldset 2
  <form>
    <div class="row active-q"> test 4 <input type="text"> </div>
  </form>
</fieldset>

<style>
.form-step {
  display: none;
}
.form-step.active {
  display: block;
}
</style>

2. 修改JS逻辑，精准判断并控制fieldset显示 #

咱们需要针对当前输入所在的fieldset做检查，还要正确判断不同输入类型是否已填写：

// 给输入元素绑定事件
$('input[type="text"],input[type="radio"],input[type="checkbox"], select').on("keyup change", function () {
  // 找到当前输入所在的fieldset
  const currentFieldset = $(this).closest('.form-step');
  // 标记当前fieldset是否所有输入都已填写
  let allFilled = true;

  // 遍历当前fieldset内所有active-q下的输入
  currentFieldset.find('.active-q input, .active-q select').each(function() {
    const $el = $(this);
    // 根据输入类型判断是否已填写
    if ($el.is('input[type="text"], select')) {
      if (!$el.val().trim().length) {
        allFilled = false;
        return false; // 跳出循环
      }
    } else if ($el.is('input[type="radio"]')) {
      // 单选框要检查同组是否有选中的
      const name = $el.attr('name');
      if (!currentFieldset.find(`input[type="radio"][name="${name}"]:checked`).length) {
        allFilled = false;
        return false;
      }
    } else if ($el.is('input[type="checkbox"]')) {
      // 复选框检查是否至少选中一个（如果是必填的话）
      if (!$el.is(':checked')) {
        allFilled = false;
        return false;
      }
    }
  });

  // 找到下一个fieldset
  const nextFieldset = currentFieldset.next('.form-step');
  // 根据是否全部填写，控制下一个fieldset的显示
  if (allFilled) {
    nextFieldset.addClass('active');
  } else {
    nextFieldset.removeClass('active');
  }
});

关键修改点说明 #

• 限定检查范围：不再全局找输入，而是只检查当前输入所在的fieldset内的active-q元素，这样不同fieldset的填写状态互不干扰。
• 适配多种输入类型：针对文本框/下拉框、单选框、复选框分别做判断，避免因为输入类型不同导致判断错误。
• 关联fieldset显示：当当前fieldset的所有必填输入都填满时，给下一个fieldset加上active类来显示，否则隐藏。

这样修改后，就能实现你要的效果：当前fieldset内所有active-q里的输入都填满时，自动显示下一个fieldset啦。

内容的提问来源于stack exchange，提问作者Josh Styp