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未定义或VIN未定义它们应该有一个有效的ID，所以我可以在CSS中编辑它们。~~由Roysh解决。

我得到了前3分，但问题从第4分开始。

我从之前的stackowerflow帖子中获得了大部分代码，但是使用了checkoxes，因此我根据我知道的方式更改了代码，现在我被卡住了。在网上搜索了几个小时，但没有。最终这应该是一个很好地运作的表单的一部分我只需要这个部分来运行。

我几乎正在使用的代码：

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）点击已经选中的单选按钮时，不会出现任何内容 - 这是我的问题。它会创建另一个字段。

关于创建多个输入的问题的解决方案非常简单。只需拨打您的函数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

＆＃13;

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();
    }
}

＆＃13;

<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>

＆＃13;

请记住，REGNR和VIN是脚本中不足的变量。我假设您没有发布创建这些变量的代码。

Answer 2

好的，这是一个更优雅的方式，解决了除了5之外的所有方法。

请记住，没有＆＃34; div.id＆＃34;也不是＆＃34; rb.name.id＆＃34;。

<script type="text/javascript">
    checked1=false;
    checked2=false;

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

关于5 - 您需要什么样的验证？通常，使用Web表单在服务器端进行验证。使用javaScript，您可以自己定义哪个输入有效，警报是错误。

HTML Javascript输入字段是在单选按钮检查/单击时创建的

2 个答案: