如果选择了一个单选条件，则 HTML 表单然后强制输入答案

【问题标题】：HTML form if one radio condition is selected then force an input如果选择了一个单选条件，则 HTML 表单然后强制输入
【发布时间】：2019-10-30 13:07:31
【问题描述】：

我有一个带有两个输入的简单 HTML 表单。一个是无线电输入，另一个是数字输入。使用 Javascript 函数，如果单选选项选择为 Insurance - YES(1)，则脚本必须强制在 Insurance Value ins_value 输入上输入数值。如果单选输入选择为否，则文本输入中不输入任何输入。

我试图找到一个类似的示例，但只找到触发警报的简单示例。我正在学习 Javascript，并且已经通过教程 - 但也没有类似的示例。

<script>
    function INSURANCE() {
        var insurance = document.forms["RegForm"]["optradio"];
        var ins_value = document.forms["RegForm"]["ins_value"];

        if (insurance.value == 0) {
            "";
            return false;
        } else  {
        if (ins_value.value == "") {
            window.alert("Please insert Insurance value.");
            ins_value.focus();
            return false;
        }

        return true;
    }
</script>

我希望一旦提交表单，它应该根据单选输入选择强制或不强制输入保险价值。

【问题讨论】：

标签： javascript html

【解决方案1】：

首先，您的用例需要一个复选框。单选按钮强制选择一个。您只有一个“是数字”标志，这意味着您的价值是真或假。

我想你可以通过根据用户选择改变你的输入类型来实现你的目标：

<input id="optcheckbox" type="checkbox" onclick="HandleCheckboxClick();" />
<input id="ins_value" type="text" onclick="HandleCheckboxClick();" />

<script>
  function HandleCheckboxClick() {
    var type = 'text';
    var checkbox = document.getElementById('optcheckbox');
    if(checkbox.checked) {
      type = 'number';
    }
    document.getElementById('ins_value').type = type;
  }
</script>

希望对你有帮助。

最好的问候

【讨论】：

【解决方案2】：

仅查看 Javascript 很难弄清楚发生了什么，包括 HTML 会有很大帮助。另外，这个问题很模糊，很难回答。

首先，您何时尝试触发强制数值？当用户点击单选按钮时？如果是这样，则在更改事件上调用该函数。如果您要在提交时更改它，则将代码放在提交函数中。

我建议构建一个数值数组并将其与单选按钮的 0、1、2、... 值相匹配。设置文本输入时，将该值插入数字数组。

这是一个将数组与单选按钮值结合使用的 JS 小提琴。

https://jsfiddle.net/Chris_Hayes/coxta1bw/1/

var form = document.querySelector("form");

var numbers = [30, 20, 80];

form.addEventListener("submit", function(event) {
  form["textinput"].value = numbers[form["contact"].value]
  event.preventDefault();
}, false);

如果用户跳过单选按钮，只需在填写数字输入之前检查 on submit 功能。

【讨论】：

【解决方案3】：

var radio = document.getElementById('optradio');
                var input = document.getElementById('ins_value');
                radio.addEventListener("click", function(){
                    if(radio.value == 0){
                        radio.value = 1;
                        this.checked = true;
                        input.removeAttribute('disabled')
                        input.value = radio.value;
                    }
                    else{
                        radio.value = 0;
                        input.setAttribute('disabled','disabled');
                        input.value = '';
                        this.checked = false;
                    }
                });

<input type="radio" name="optradio" id="optradio" value="0">
            <input type="number" name="ins_value" id="ins_value" value="" disabled>

像这样将disabled 属性添加到您的数字输入中

html:

<input type="radio" name="optradio" id="optradio" value="0">
<input type="number" name="ins_value" id="ins_value" value="" disabled>

java脚本：

<script type="text/javascript">
            var radio = document.getElementById('optradio');
            var input = document.getElementById('ins_value');
            radio.addEventListener("click", function(){
                if(radio.value == 0){
                    radio.value = 1;
                    this.checked = true;
                    input.removeAttribute('disabled')
                    input.value = radio.value;
                }
                else{
                    radio.value = 0;
                    input.setAttribute('disabled','disabled');
                    input.value = '';
                    this.checked = false;
                }
            });
        </script>

在您的 html 代码下方添加脚本

【讨论】：