如何关联两个输入字段？

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属性而不是第二个输入，只需将文本放在span或label中：

  <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：更新了带有单个选项复选框的Fiddle ： 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);
}

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