JavaScript - 如何获取动态单选按钮名称和选定值？ [复制]答案

【问题标题】：JavaScript - How to get dynamic radio buttons name and selected value? [duplicate]JavaScript - 如何获取动态单选按钮名称和选定值？ [复制]
【发布时间】：2019-09-18 09:08:11
【问题描述】：

我有一个嵌入式表单，其中字段名称是动态生成的。我正在尝试获取一组单选按钮的字段名称和选定值。

<div class="Business_Type">
    <input type="radio" name="12234_1212" value="Private"> Channel<br>
    <input type="radio" name="12234_1212" value="Public"> Direct
</div>

这是我尝试的不起作用的脚本：

<script>    
    var fieldContainer_Business_Type = document.getElementsByClassName('Business_Type')[0];
    var radios_Business_Type = fieldContainer_Business_Type.getElementsByTagName("input");
    var Business_Type;

    function businessType() {
        for (var i = 0; i < radios_Business_Type.length; i++) {
            if (radios_Business_Type[i].type === 'radio' && radios_Business_Type[i].checked) {
                Business_Type = radios_Business_Type[i].value;
                console.log(Business_Type);
            }
        }   
    }

    radios_Business_Type.onclick = businessType();
</script>

非常感谢任何帮助。请只使用原生 JavaScript（不是 jQuery）。

【问题讨论】：

radios_Business_Type.onclick = businessType(); 应该是 radios_Business_Type.onclick = businessType; 或者更好的是 radios_Business_Type.addEventListener("click", businessType);，请参阅链接问题的答案了解原因。
顺便说一句，您可以更轻松地获取单选按钮列表（并且只是单选按钮，而不是所有 inputs）：var radios_Business_Type = document.querySelector(".Business_Type").querySelectorAll("input[type=radio]"); 如果只有一个 .Business_Type 元素，那么它还可以更简单：var radios_Business_Type = document.querySelectorAll(".Business_Type input[type=radio]");

标签： javascript forms radio-button

【解决方案1】：

var fieldContainer_Business_Type = document.getElementsByClassName('Business_Type')[0];
var radios_Business_Type = fieldContainer_Business_Type.getElementsByTagName("input");
var Business_Type;

function businessType() {

    for (var i = 0; i < radios_Business_Type.length; i++) {
        if (radios_Business_Type[i].type === 'radio' && radios_Business_Type[i].checked) {
            Business_Type = radios_Business_Type[i].value;
            console.log(Business_Type);
        }
    }
}

for (var i = 0; i < radios_Business_Type.length; i++) {
    radios_Business_Type[i].addEventListener('click', businessType);
}

<div class="Business_Type">
    <input type="radio" name="12234_1212" value="Private"> Channel<br>
    <input type="radio" name="12234_1212" value="Public"> Direct
</div>

【讨论】：