存储和访问每个单选按钮单击

Question

我想将每个单选按钮选择存储为一个数组。

例如，给定 2 个单选按钮，如果用户 a 选择第一个，然后选择第二个，然后再次选择第一个，我想要一个 [1,2,1].

的数组

这里是questions.html:

<html>
<head>
    <title></title>
</head>
<body>
    {% for post in posts %}
        <h1>Question {{ post.Number }}</h1>
        <h2> {{ post.Question }}</h2>
            {% for choice in post.Choices %}
    <form>
                <input type="radio" name="choice" id="{{ post.Number }}{{ choice[0] }}" value="{{ choice[0] }}"> {{ choice[1] }}</input><br>
            {% endfor %}
    </form>
    {% endfor %}
</body>
</html>

这里是flask_main.py:

from flask import Flask, render_template
import statics
app = Flask(__name__)

post = [
    {'Number': '1',
     'Statement': 'the question',
     'Choices': [('a', 'words'),
                 ('b', 'words')]
     },
    {'Number': '2',
     'Statement': 'the question',
     'Choices': [('a', 'words'),
                 ('b', 'words')]
     }
       ]

@app.route('/')
@app.route("/questions")
def questions():
    return render_template('questions.html', posts=post)


if __name__ == '__main__':
    app.run(debug=True)

Answer 1

基本上这个和server-side没有关系(=Python).

首先，确保所有单选按钮都在一个表单中，否则它们将被视为在不同的组中（也就是可以 select 多个）。

然后你可以创建一个数组，并在change事件中将修改后的无线电的id（或任何你想存储的）添加到数组中。

现在这只是你对阵列做什么的问题。将其显示在页面的某处或发送回服务器。

请参阅下面的纯 JS 示例。

let choices = [];
let radios = document.getElementsByClassName("my-radio");

for (let radio of radios) {
  radio.addEventListener("change", (event) => {
    choices.push(event.target.id);
    document.getElementById("output").innerHTML = choices;
  });
}

<h1>Question 1</h1>
<form>
  <input type="radio" class="my-radio" name="choice" id="question-1" value="choice-1">
    choice 1
  </input>
  <br>
  <input type="radio" class="my-radio" name="choice" id="question-2" value="choice-2">
    choice 2
  </input>
</form>
<p id="output"></p>

存储和访问每个单选按钮单击

Store and Access Each Radio Button Click

html

javascript

python

jinja2

flask