Question

我想存储正确的答案（选项）以及其他3个选项。但是对于其他3个选项，我会将其存储在数据库中，即is_correct（column）0 / no / False。但是为此，我将必须具有这样的逻辑，即找出哪个单选按钮用于哪个输入字段。如何将单选输入字段绑定/映射到文本输入字段？

我可以从这些元素中提取值，但无法弄清楚逻辑。

<div id="option" class="form-group">
            <input type="radio" name="option" required/><input type="text" name="option_1" required/><br/><br/>
            <input type="radio" name="option" required/><input type="text" name="option_2" required/><br/><br/>
            <input type="radio" name="option" required/><input type="text" name="option_3" required/><br/><br/>
            <input type="radio" name="option" required/><input type="text" name="option_4" required/>
        </div>

我只是不知道下一步！尽管概念相同，但看到的帖子类型相似但tbh却不太相似。

Answer 1

首先，我认为您应该使用radioButtons的value属性而不是第二个输入，只需将文本放在跨度或标签中即可：

  <input type="radio" id="option1" name="option" value="option1">
  <label for="option1">8</label>

然后您可以通过执行以下操作获得所选值：

var selectedOption = null;
if (document.getElementById('option1').checked) {
  selectedOption = document.getElementById('option1').value;
}

之后，您可以查询数据库以查看所选选项是否正确。

Answer 2

首先，我真的不明白您为什么使用和单选按钮。我认为，只需将输入文本切换为标签，或者如果您希望用户输入答案，只需给他输入1个文本。

话虽如此，但请保留您的设计：

HTML：

<div id="options" class="form-group">
            <input type="radio" id="option_text" required/><input type="text" id="option_1" required/><br/><br/>
            <input type="radio" id="option_text2" required/><input type="text" id="option_2" required/><br/><br/>
            <input type="radio" id="option_text3" required/><input type="text" id="option_3" required/><br/><br/>
            <input type="radio" id="option_text4" required/><input type="text" id="option_4" required/>
            <button type="submit" id="sub">
            Press me
            </button>
</div>

<div id="output1">
</div>
<div id="output2">
</div>
<div id="output3">
</div>
<div id="output4">
</div>

Javascript：

$("#sub").on('click',function(){
let eachone=[];
    eachone[0]=$("#option_1").val();
    eachone[1]=$("#option_2").val();
    eachone[2]=$("#option_3").val();
    eachone[3]=$("#option_4").val();
        $("#output1").html(eachone[0]+" - "+$("#option_text").prop("checked"))
        $("#output2").html(eachone[1]+" - "+$("#option_text2").prop("checked"))
        $("#output3").html(eachone[2]+" - "+$("#option_text3").prop("checked"))
        $("#output4").html(eachone[3]+" - "+$("#option_text4").prop("checked"))
})

如果您要更改某些内容或测试您的确切测试用例，这是小提琴 Jfiddle。请注意，我使用的是jQuery，只是为了简化代码，您可以将大多数jquery引用更改为document.getElementById

编辑： 更新了带有复选框的提琴：JFiddle

Edit2： 使用单选项复选框更新了小提琴： Jfiddle2

警告：创建的事件可能会破坏代码中包含的其他一些输入类型复选框！

Answer 3

提交一个JSON字符串/对象，而不是使用表单数据提交表单呢？因此，您要提出问题的对象可以是

{
    "question" : "How many planets orbit around the sun?",
    "options" : [{
        "name" : "1",
        "value" : "7",
        "isAnswer" : false
        }, {
        "name" : "2",
        "value" : "8",
        "isAnswer" : true
    }]
}

现在，剩下的就是单击“提交”按钮时创建该对象。为此，您可以使用

之类的ID。

<input type="radio" id="radio-1" name="option" required/>
<input type="text" id="text-1" required/>

可以动态创建这些元素，如果仅针对单个问题创建页面，则可以手动创建。

现在，当单击要提交表单的按钮时，您可以运行以下代码来构造JSON对象。

let question = {};
question.question = $("#question").val(); //Assuming you are using jQuery and id for question input box is question.
question.options = [];
for(i=0; i<4; i++) {
    let option = {};
    option.name = (i+1); //convert to ascii if you want alphabets
    option.value = $("#text-"+(i+1)).val();
    option.isAnswer = $("#radio-"+(i+1)).checked;
    question.options.push(option);
}

您现在可以将此问题对象发送到您的服务器。

如何关联两个输入字段？

3 个答案: