从单选按钮组中获取所有选定值的最佳(和正确)方法是什么

时间:2015-08-29 07:57:13

标签: javascript html node.js

我正在学习HTML,JavaScript和... NodeJs(我刚刚开始(。

我正在尝试创建一个网站,用户将回答一些问题(使用单选按钮),当用户单击“提交”按钮时,答案将被发送到服务器。)

我正在通过这个javascript函数创建问题:

<script type="text/javascript" >

    var questionCounter = 0;
    var questionId = 0;

    function printQueue(question) {     

        questionId++;
        questionCounter++;  
        var radioName="Q"+questionCounter;
        var id = "Q" + questionCounter;                 
        document.write("<p> <b> " + question + " </b> </p>");                                                                                                                       
        document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
                            " onclick=\"check(this.value)\" value=\"5\">Best<br>");
        document.write ("<input type=\"radio\" id=" + id + " name=" + radioName + 
                                " onclick=\"check(this.value)\" value=\"4\">Very Good<br>");
        document.write ("<input type=\"radio\" id=" + id + " name=" + radioName + 
                                " onclick=\"check(this.value)\" value=\"3\">Good<br>");
        document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
                                " onclick=\"check(this.value)\" value=\"2\">Not Good<br>");
        document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
                                " onclick=\"check(this.value)\" value=\"1\">Worst<br>");
    }

</script>

并按以下方式调用此函数:

<script type="text/javascript" >                
    printQueue("1.  XXX1 ? ");
    printQueue("2.  XXX2  ? ");
    printQueue("3.  XXX3  ? ");
    ...
    ...
    printQueue("N.  XXXN  ? "); 
</script>

有没有办法解决问题并获得每个问题所选答案的价值?

我看了看: How to get value of selected radio button

但它似乎很麻烦......

有这样的方式:

1. loop over the questions
   1.1 for each Q getSelected().getvalue() 

由于

1 个答案:

答案 0 :(得分:0)

这可能会有所帮助

HTML

<form id="myForm">
    <div class='Q'> <span>Q1</span>
        <input type="radio" name="Q1" value="1" />1
        <br />
        <input type="radio" name="Q1" value="2" />2
        <br />
        <input type="radio" name="Q1" value="3" />3
        <br />
    </div>
    <div class='Q'> <span>Q2</span>
        <input type="radio" name="Q2" value="1" />1
        <br />
        <input type="radio" name="Q2" value="2" />2
        <br />
        <input type="radio" name="Q2" value="3" />3
        <br />
    </div>
    <input type='button' value='Get Values' id='temp'>
</form>

JS

$('#temp').on('click', function () {
    var Ans = [];
    $('.Q').each(function (index, Obj) {
        Ans.push({
            "Name ": $(this).find('span').text(),
            "Answer": $(this).find('input[type="radio"]:checked').val()
        })
    })
    console.log(Ans)
});

Demo