javascript - HTML Javascript 输入字段是在单选按钮选中/单击时创建的

Question

我是编程新手，这是我第一次使用 JavaScript。我正在努力实现:

1) 点击第一个单选按钮出现输入字段 text-837 已解决

2) 点击第二个单选按钮出现输入字段 text-263 并替换前一个字段 已解决

3) 反之亦然。 (在第一次点击其中一个单选按钮时出现输入字段，选择另一个单选按钮将替换之前的字段) 已解决

4) 只能存在一个字段。 已解决

4.1) 单击已选中的单选按钮时，不应出现任何内容 - 这是我的问题。它创造了另一个领域。 由 Roysh 解决，上帝是好的。

5) 输入字段应该是必填字段，单选按钮选择也应该是必填字段。 - 不知道如何实现。它们是通过电子邮件发送的表格的一部分。填写表格的人需要选中其中一个单选按钮并需要填写创建的字段。 已解决

5.1) 添加。第一个 REGNR 字段 text-837 最多应包含 6 个字符，最少应包含 4 个字符。第二个字段 VIN text-263 最多和最少应包含 17 个字符。

6) Javascript 创建的 DIV 应该有一个定义的 ID - 不知道如何。现在，新字段出现 REGNR undefined 或 VIN undefined 它们应该有一个有效的 ID，这样我就可以在 CSS 中编辑它们。 由 Roysh 解决。

前3点我答对了，但问题从第四个4点开始。

我从之前的 stackowerflow 帖子中获得了大部分代码，但其中使用了复选框，所以我尽可能多地更改了代码，但现在我被卡住了。在网上搜索了几个小时，但一无所获。最终这应该是一个很好用的表单的一部分，我只需要这部分就可以运行。

我几乎可以工作的代码:

function dynInput(rb) {
if (document.getElementById('raadio').checked == true) {
    var input = document.createElement("input");
    input.type = "text";
    input.value = "field1";
    input.name = "text-837";
    input.required="required";
    var div = document.createElement("div");
    div.id = rb.name.id;
    div.innerHTML = "REGNR " + rb.name.id;
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
}
if (document.getElementById('raadio2').checked == true) {
    var input = document.createElement("input");
    input.type = "text";
    input.value = "field2";
    input.name = "text-263";
    input.required="required";
    var div = document.createElement("div");
    div.id = rb.name;
    div.innerHTML = "VIN " + rb.name.id;
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
}
if (document.getElementById('raadio').checked == false) {
    document.getElementById(rb.name.id).remove();
}
if (document.getElementById('raadio2').checked == false) {
    document.getElementById(rb.name).remove();
}
}

谢谢你的帮助。

Answer 1

4.1) On clicking already checked radio button nothing should appear - This is my problem. It creates another field.

关于创建多个输入的问题的解决方案非常简单。只需调用您的函数 onchange()而不是 onclick() . HTML 应该看起来像这样:

<input type="radio" name="rb" id="raadio" onchange="dynInput(this);"> Eestis<br>

<input type="radio" name="rb" id="raadio2" onchange="dynInput(this);">Mujal

function dynInput(rb) {
    if (document.getElementById('raadio').checked == true) {
        var input = document.createElement("input");
        input.type = "text";
        input.value = "field1";
        input.name = "text-837";
        input.required = "true";
        var div = document.createElement("div");
        div.id = rb.name.id;
        div.innerHTML = "REGNR " + rb.name.id;
        div.appendChild(input);
        document.getElementById("insertinputs").appendChild(div);
    }
    if (document.getElementById('raadio2').checked == true) {
        var input = document.createElement("input");
        input.type = "text";
        input.value = "field2";
        input.name = "text-263";
        var div = document.createElement("div");
        div.id = rb.name;
        div.innerHTML = "VIN " + rb.name.id;
        div.appendChild(input);
        document.getElementById("insertinputs").appendChild(div);
    }
    if (document.getElementById('raadio').checked == false) {
        document.getElementById(rb.name.id).remove();
    }
    if (document.getElementById('raadio2').checked == false) {
        document.getElementById(rb.name).remove();
    }
}

<div class="radio">
    <label for="Radios">
        <input type="radio" name="rb" id="raadio" onchange="dynInput(this);" />Eestis
        <br/>
        <input type="radio" name="rb" id="raadio2" onchange="dynInput(this);" />Mujal</label>
</div>
<p id="insertinputs"></p>

请记住，REGNR 和 VIN 在您的脚本中是带下划线的变量。我假设您只是没有发布创建这些变量的代码。