单选按钮控制div组输入框数量异常：仅首个div生效

问题根源 #

你的代码仅对第一个.number-input-container生效，核心原因是：在遍历单选按钮容器时，你把每个单选组和对应索引的单个数字输入容器做了绑定。点击单选按钮时，只会操作当前索引匹配的那一个容器，而非所有数字输入容器。

修复后的代码 #

document.addEventListener('DOMContentLoaded', function () {
  // 直接获取所有单选按钮，无需按容器分组遍历
  var radioButtons = document.querySelectorAll('.form-step .type-window input[name="plan"]');
  var numberInputContainers = document.querySelectorAll('.form-step .number-input-container');

  radioButtons.forEach(function (radioButton) {
    radioButton.addEventListener('change', function () {
      hideAllNumberInputContainers();
      
      // 遍历所有数字输入容器，给每个容器应用显示规则
      numberInputContainers.forEach(function(container) {
        if (radioButton.id === 'etplan') {
          showNumberInputContainer(container, 'stue-item');
        } else if (radioButton.id === 'toplan') {
          showNumberInputContainer(container, 'stue-item');
          showNumberInputContainer(container, 'sal-item');
        } else if (radioButton.id === 'etagelejlighed') {
          showNumberInputContainer(container, 'lejlighed-item');
        }
      });
    });
  });

  function hideAllNumberInputContainers() {
    numberInputContainers.forEach(function (container) {
      var inputs = container.querySelectorAll('input[type="number"]');
      inputs.forEach(function (input) {
        input.style.display = 'none';
      });
    });
  };

  function showNumberInputContainer(container, selector) {
    var inputs = container.getElementsByClassName(selector);
    Array.from(inputs).forEach(function (input) {
      input.style.display = 'inline-block';
    });
  }
});

关键修改说明 #

1. 取消了单选容器和数字容器的索引绑定逻辑，直接获取所有单选按钮
2. 单选按钮触发变更时，遍历所有数字输入容器，对每个容器单独应用显示规则
3. 保留原有隐藏/显示函数的逻辑，确保每个容器内的输入框都能被正确控制

修复后效果：

• 点击etplan：所有数字容器仅显示stue-item输入框
• 点击toplan：所有数字容器显示stue-item和sal-item两个输入框
• 点击etagelejlighed：所有数字容器仅显示lejlighed-item输入框

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