第一个单选按钮的值始终被发送

问题描述

我有（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)

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

解决方法

“ 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)
}

尝试..

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>

forms javascript radio