Javascript 如何记录。querySelectorAll（）仅记录选中的项

我有一个快速向导，通过复选框和单选按钮捕获客户选择，每个向导页面上只有一个实例，所以只有单选框或复选框

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const inputs = [];
  form.querySelectorAll("input").forEach((input) => {
    
    const { name, value, status } = input;
    inputs.push({ name, value });
  });
  console.log(inputs);
  form.reset();
});

我正在尝试只捕获选定的收音机和复选框

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const inputs = [];
  form.querySelectorAll("input").forEach((input) => {
    
    const { name, value, status } = input;
    inputs.push({ name, value });
  });
  console.log(inputs);
  form.reset();
});

下面是带有3步向导的HTML

<section>
  <div class="container">
    <form>

      <div class="step step-1 active">
        <h2>How to serve?</h2>
        <div class="form-group">
            <input type="radio" id="forhere" name="where" value="forhere"
         checked>
             <label for="forhere">For Here</label>
        </div>
        <div class="form-group">
            <input type="radio" id="togo" name="where" value="togo">
             <label for="togo">To Go</label>
        </div>
        <button type="button" class="next-btn">Next</button>
      </div>

      <div class="step step-2">
        <h2>Size?</h2>
        <div class="form-group">
            <input type="radio" id="small" name="size" value="small"
         checked>
             <label for="small">Small</label>
        </div>
        <div class="form-group">
            <input type="radio" id="medium" name="size" value="medium">
             <label for="medium">Medium + 0.49c</label>
        </div>
                <div class="form-group">
            <input type="radio" id="large" name="size" value="large">
             <label for="large">Large + 0.99c</label>
        </div>
        <button type="button" class="previous-btn">Prev</button>
        <button type="button" class="next-btn">Next</button>
      </div>

      <div class="step step-3">
        <p>Anything Else:</p>
        <div class="form-group">
          <input type="checkbox" id="extrahot" name="extrahot" checked>
          <label for="extrahot">Extra Hot</label>
        </div>
        <div class="form-group">
          <input type="checkbox" id="doubleshot" name="doubleshot">
          <label for="doubleshot">Double Shot + $0.49c</label>
        </div>
        <div class="form-group">
          <input type="checkbox" id="whipped" name="whipped">
          <label for="whipped">Whipped Cream</label>
        </div>
        <button type="button" class="previous-btn">Prev</button>
        <button type="submit" class="submit-btn">Add To Order</button>
      </div>

    </form>
  </div>
</section>

我没有设置这个选项，因为我将把它添加为一个弹出窗口，我目前只使用一个选择选项，但需要复选框

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const inputs = [];
  form.querySelectorAll("input").forEach((input) => {
    
    const { name, value, status } = input;
    inputs.push({ name, value });
  });
  console.log(inputs);
  form.reset();
});

谢谢您

请立即返回

只需返回正确的位置