javascript - 如何通过javascript访问选中的单选框的值

Question

我正在通过 JS 渲染 HTML 表单，当用户填写数据并单击提交时，我将转换为 JSON。但我无法获取选中的单选框的值。这是我渲染单选框的代码-

return '<div class="">\
        <label class="" for="">Gender</label>\
        <div class="">\
            <div id="">\
                <div class="">\
                    <label for="" class="radio">Male</label>\
                    <input id="" type="radio" name = "gender" value="M">\
                </div>\
                <div class="">\
                    <label for="" class="radio">Female</label>\
                    <input id="" type="radio" name = "gender" value="F">\
                </div>\
                <div class="">\
                    <label for="" class="radio">Others</label>\
                    <input id="" type="radio" name = "gender" value="O">\
                </div>\
            </div>\
        </div>\
    </div>';
};

这是我将用户填写的表单转换为 JSON 的函数，

var convertIntoJSON = function(elements) {
    return [].reduce.call(elements, function(data, element){
        data[element.name] = element.value;
        return data;
    }, {});
};

我正在调用上述函数，如 convertIntoJSON(form.elements)，其中 form 是我的实际表单容器。

请告诉我如何通过此代码访问选中的单选按钮，通过此代码，无论我在性别字段中选择什么，我每次都会将性别设置为“O”。

Answer 1

正如我在评论中所说，您不能使用此简写来获取 radio 数组的值。以下是仍然支持非 radio 输入原始功能的解决方法:

var convertIntoJSON = function(elements) {
    return [].reduce.call(elements, function(data, element){
        if (element.type === "radio") {
          if (element.checked) {
            data[element.name] = element.value;
          }
        } else {
            data[element.name] = element.value;
        }
        return data;
    }, {});
};

var logSelected = document.getElementById('logSelected');
var form = document.getElementById('theForm');

logSelected.addEventListener('click',() => {
  console.log(convertIntoJSON(form.elements));
})

<form id="theForm">
  <label for="" class="radio">Male</label>
  <input id="" type="radio" name = "gender" value="M">

  <label for="" class="radio">Female</label>
  <input id="" type="radio" name = "gender" value="F">

  <label for="" class="radio">Others</label>
  <input id="" type="radio" name = "gender" value="O">

</form>

<input type="button" value="log selected" id="logSelected"/>