使用querySelectorAll遍历表单，将输入值存入数组的问题

错误原因 #

• $inputs[0]返回的是原生DOM元素，而.val()是jQuery对象的专属方法，原生DOM元素没有这个方法，因此抛出TypeError。
• HTML存在重复ID问题：两个表单里的name、yes、no ID重复，违反HTML规范，会导致选择器无法精准定位元素，后续操作易出问题。

正确实现方案 #

方案1：修正jQuery对象调用逻辑 #

将原生DOM元素转为jQuery对象，或使用jQuery的.eq()方法获取对应索引的jQuery对象：

function next() {
  var arrayOutput = [];
  var myForms = document.querySelectorAll('[id^="form-"]');

  myForms.forEach(form => {
    var $inputs = $(form).find(':input');
    var single = {};
    // 原生DOM转jQuery对象后调用val()
    single.name = $($inputs[0]).val();
    // 复选框需判断checked状态而非val()
    single.yes = $inputs.eq(1).prop('checked');
    single.no = $inputs.eq(2).prop('checked');
    arrayOutput.push(single);
  });

  console.log(arrayOutput); // 查看结果
}

方案2：简洁的jQuery写法 #

利用jQuery的选择器和遍历方法，代码更直观：

function next() {
  var arrayOutput = [];
  $('[id^="form-"]').each(function() {
    var $form = $(this);
    var single = {
      name: $form.find('[name="name"]').val(),
      yes: $form.find('[name="yes"]').prop('checked'),
      no: $form.find('[name="no"]').prop('checked')
    };
    arrayOutput.push(single);
  });

  console.log(arrayOutput);
}

修正HTML重复ID问题 #

将重复ID改为唯一值（比如添加表单ID前缀），避免选择器冲突：

<div id="34">
  <form id="form-34" method="post">
    <div class="col-xs-3">
      <div class="container">
        <label> Model
          <span>
            <input type="text" id="name-34" name="name"/>
          </span>
        </label>
      </div>
      <input type="checkbox" id="yes-34" name="yes"/>
      <input type="checkbox" id="no-34" name="no"/>
    </div>
  </form>
</div>
<div id="35">
  <form id="form-35" method="post">
    <div class="col-xs-3">
      <div class="container">
        <label> Model
          <span>
            <input type="text" id="name-35" name="name"/>
          </span>
        </label>
      </div>
      <input type="checkbox" id="yes-35" name="yes"/>
      <input type="checkbox" id="no-35" name="no"/>
    </div>
  </form>
</div>

关键注意点 #

• 区分原生DOM元素与jQuery对象：原生元素用.value（输入框）、.checked（复选框）；jQuery对象用.val()、.prop('checked')。
• HTML中ID必须唯一，否则会导致选择器行为异常。
• 遍历表单时，以当前表单为上下文查找子元素（如$(form).find(':input')），避免全局查找引发的冲突。

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