Question

我正在尝试获取所选单选按钮的值，以便可以使用Ajax提交表单，我在这里搜索了一些帮助，但找不到任何有用的解决方案

<input type="radio" id="answer" name="answer<?php echo $function::escape_string($question_row->question_id); ?>"
                         value="<?php echo $function::escape_string($answer_row>answer_id); ?>"/>

-HTML输出

<input type="radio" id="answer" name="answer16" value="107"/>

<input type="radio" id="answer" name="answer17" value="109"/>

<input type="radio" id="answer" name="answer15" value="104"/>

我在这里找到了此功能

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;

    alert("Size is " + sizes);
        for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}

var radioinputs = findSelection("answer");

但是我不知道要进行哪些更改，因此我可以使其正常工作

Answer 1

从外观上看，您有一个动态name字段，即name="answer2"，name="answer3"等。因此，您的查询document.getElementByName(field)将找不到匹配的字段"answer"。

要解决此问题，或者摆脱动态name，或者如果您真的需要它，那么我想说，向所有这些单选按钮添加class并使用document.getElemenetsByClassName。

Answer 2

您可以这样构造：

function findSelection(field) {
    var test = document.getElementsByClassName(field);
    var sizes = test.length;

    //alert("Size is " + sizes);
    result = [];
    // result[16]=107;
    // result[17]=109;
    // result[15]=104;
    for (i=0; i < sizes; i++) {
        var index = test[i].dataset.index;
        if(test[i].checked == true){
            result[index] = test[i].value;
        }else{
            result[index] = undefined; // for a answer doesn't have a value
        }
    }
    
    return result;
}
function checkfunction(){
    var radioinputs = findSelection("radioanswer"); 
    console.log(radioinputs);
    console.log(radioinputs[15]);
};

<form id="form1">
    <input type="radio" class="radioanswer" name="answer16" data-index="16" value="107"/>

    <input type="radio" class="radioanswer" name="answer17" data-index="17" value="109"/>

    <input type="radio" class="radioanswer" name="answer15" data-index="15" value="104"/>

    <button type="button" onclick="checkfunction();"> Check </button>
</form>

一个类可以有多个实例，而id只有一个！您可以在此处查看有关数据属性的文档：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

如何获得选定的单选按钮值？

2 个答案: