如何关联两个输入字段？

debugcn 发表于 Dev

穆罕默德·伊姆兰

我想存储正确的答案（选项）和其他 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>

我就是想不通下一步！尽管概念相同，但看到类似类型的帖子但不太相似。

H.菲格雷多

首先，我真的不明白你为什么使用单选按钮和输入文本。在我看来，只需将输入文本切换为标签，或者如果您希望用户输入答案，只需给他 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

编辑 2：使用单个选项复选框更新小提琴：Jfiddle2

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-24

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何关联两个输入字段？

如何关联两个输入字段？

如何在JavaScript中关联两个输入？

如何在更新时验证两个输入字段

带两个按钮的输入字段

如何关联两个 SQL 表

如何计算两个输入字段并在输入元素中显示总和

我的程序如何从一个输入字段计算两个方程？

如何使两个输入字段为必需，并在Codeigniter中接受一个的值？

如何在两个输入字段中只设置一个 NULLABLE

如何：基于两个用户输入和两个字段进行计算的高级访问查询

如何在HTML中使用相同的输入值来具有一个输入字段，两个按钮和两个动作

如何在材料UI中的文本字段中使两个输入装饰彼此相邻

如何将单独的FOCUS样式应用于两个输入字段

使用单个函数如何调用两个不同的输入字段

我如何从单选按钮下的两个输入字段中获取数据

如何将两个单选按钮的输入分配给单个字段？

如何使用jquery检查两个输入字段是否填写并等待2秒

如何划分两个表字段？

如何划分两个表字段？

如何分隔两个输入整数？

如何输入两个元素

如何将一个表中的两个字段关联到另一个表中的一个字段

在React中链接两个输入字段

行jquery mobile中的两个输入字段

计算JavaScript中的两个输入字段值

我想使用JQuery克隆两个输入字段

Bootstrap在输入字段旁边放置两个glyphicons

Javascript / html：两个输入范围字段的天平

在Haskell中输入两个枚举字段

行jquery mobile中的两个输入字段