第一个单选按钮的值总是被发送答案

【问题标题】：The first radio button's value is always being sent第一个单选按钮的值总是被发送
【发布时间】：2020-12-09 09:17:37
【问题描述】：

我有 (4) 个单选按钮和提交按钮：

    <form class="addrecipe-form" method="GET">
    <div class="addrecipe-form-header-row">
        <div>
            <input type="radio" class="recipe-type-button" id="breakfast" name="recipe-type" value="breakfast" />
            <label for="breakfast" class="recipe-type-label">breakfast</label>
        </div>
        <div>
            <input type="radio" class="recipe-type-button" id="appetizer" name="recipe-type" value="appetizer" />
            <label for="appetizer" class="recipe-type-label">appetizer</label>
        </div>
        <div>
            <input type="radio" class="recipe-type-button" id="entree" name="recipe-type" value="entree" />
            <label for="entree" class="recipe-type-label">entree</label>
        </div>
        <div>
            <input type="radio" class="recipe-type-button" id="dessert" name="recipe-type" value="dessert" />
            <label for="dessert" class="recipe-type-label">dessert</label>
        </div>
    </div>
    <button class="addrecipe-button" type="submit" name="recipe-submit"></button>
</form>

这里是javascript：

var addRecipeForm = document.querySelector(".addrecipe-form");
var recipe_entry;

addRecipeForm.addEventListener('submit', function(e) {
    e.preventDefault();
    recipe_entry = {
        type : document.querySelector(".recipe-type-button").value)
    }
    console.log(recipe_entry.type)

我只是不明白为什么我一直得到第一个单选按钮的值，而不是我点击的那个。有人可以启发我吗？

【问题讨论】：

querySelector(".recipe-type-button") 返回第一个匹配元素，而不是您正在考虑的元素 - 计算机不能那样工作...... - 也许querySelector(".recipe-type-button:selected") 会工作
document.querySelector("input[name=recipe-type]:checked").value 可能会起作用。

标签： javascript forms radio

【解决方案1】：

“document.querySelector()”函数返回匹配查询选择器的第一次出现。

我会使用 for 循环和“document.getElementsByClassName()”来检查每个单选按钮的值，并且仅在选中时保存状态。

像这样：

addRecipeForm.addEventListener('submit', function(e) {
    e.preventDefault();
    for(var i=0;i<document.getElementsByClassName("recipe-type-button").length){
        if(document.getElementsByClassName("recipe-type-button")[i].checked){
            recipe_entry = {
                type : document.getElementsByClassName("recipe-type-button")[i].value
            }
        }
    }
    console.log(recipe_entry.type)
}

【讨论】：

【解决方案2】：

试试..

type: document.querySelector(".recipe-type-button:checked").value

.. 获取选定的值。

完整脚本：

<html>
  <form class="addrecipe-form" method="GET">
    <div class="addrecipe-form-header-row">
      <div>
        <input
          type="radio"
          class="recipe-type-button"
          id="breakfast"
          name="recipe-type"
          value="breakfast"
        />
        <label for="breakfast" class="recipe-type-label">breakfast</label>
      </div>
      <div>
        <input
          type="radio"
          class="recipe-type-button"
          id="appetizer"
          name="recipe-type"
          value="appetizer"
        />
        <label for="appetizer" class="recipe-type-label">appetizer</label>
      </div>
      <div>
        <input
          type="radio"
          class="recipe-type-button"
          id="entree"
          name="recipe-type"
          value="entree"
        />
        <label for="entree" class="recipe-type-label">entree</label>
      </div>
      <div>
        <input
          type="radio"
          class="recipe-type-button"
          id="dessert"
          name="recipe-type"
          value="dessert"
        />
        <label for="dessert" class="recipe-type-label">dessert</label>
      </div>
    </div>
    <button class="addrecipe-button" type="submit" name="recipe-submit">
      Magic
    </button>
  </form>
  <script>
    var addRecipeForm = document.querySelector(".addrecipe-form");
    var recipe_entry;

    addRecipeForm.addEventListener("submit", function (e) {
      e.preventDefault();
      recipe_entry = {
        type: document.querySelector(".recipe-type-button:checked").value,
      };
      console.log(recipe_entry.type);
    });
  </script>
</html>

【讨论】：