如果选中复选框，则添加新输入框[重复]答案

【问题标题】：If checkbox is checked add new input box [duplicate]如果选中复选框，则添加新输入框[重复]
【发布时间】：2014-03-08 02:55:03
【问题描述】：

我有这样的表格

<form >             
   <input type="text" placeholder="First Name" required id="fname" name="fname"/>
   <input type="text" placeholder="Last Name" required id="lname" name="lname"/>

   <input type="checkbox" placeholder="Maiden Name" id="Maiden Name" name="chkname"/>

   <input type="hidden" placeholder="Maiden Name" id="mname" name="mname"/>
...
</form>

如果复选框被选中，那么娘家姓输入框应该是可见的，任何人都可以帮我解决这个问题。

【问题讨论】：

您自己尝试过脚本吗？
请问你的脚本在哪里？
什么脚本？我问你
@RemusRigo - 你在问我们？你是应该编写代码的人...
我有一个表单，我问过你如何显示/隐藏一个输入框，但是感谢 JoshC，我现在知道了

标签： html

【解决方案1】：

在这种情况下，无需 JavaScript 也可以做到这一点，只需使用 :checked 伪类：

EXAMPLE HERE

#mname {
    display:none;
}
#maidenname:checked ~ #mname {
    display:block;
}

使用通用同级组合器~ 或相邻的同级组合器+，在切换复选框元素时更改input 元素的显示。这当然假设复选框在 DOM 中的输入元素之前。

如果您更愿意使用 JavaScript，可以使用以下代码：

JS EXAMPLE HERE

var checkbox = document.getElementById('maidenname');
var input = document.getElementById('mname');

checkbox.addEventListener('click', function () {
    if (input.style.display != 'block') {
        input.style.display = 'block';
    } else {
        input.style.display = '';
    }
});

或者，如果您希望向 DOM 添加一个 input 元素（正如您的标题所暗示的那样），而不是更改它的可见性，您可以使用像这样：

ALTERNATIVE JS EXAMPLE HERE

var checkbox = document.getElementById('maidenname');
checkbox.addEventListener('click', function () {
    if (document.getElementById('mn')) {
        document.getElementById('mn').remove();
    } else {
        var input = document.createElement("input");
        input.id = 'mn';
        input.type = 'text';
        input.placeholder = 'Maiden Name';
        document.body.appendChild(input);
    }
});

【讨论】：

但它可以满足我的需要

【解决方案2】：

您不应该将娘家姓输入框用作 type="hidden"。如下使用：

 <input type="text" style=" display:none" placeholder="Maiden Name" id="mname" name="mname"/>

调用函数以在单击复选框时切换显示：

<input onchange="showHideControl();" type="checkbox" placeholder="Maiden Name" id="Maiden Name" name="chkname"/>

切换娘家姓输入框：

function showHideControl()
   {
   $('#mname').toggle();
   }

【讨论】：

【解决方案3】：

您可以使用纯 javascript 来完成，如下所示：

<form id=frmMain name=frmMain>             
<input type="text" placeholder="First Name" required id="fname" name="fname"/>
<input type="text" placeholder="Last Name" required id="lname" name="lname"/>

<input type="checkbox" placeholder="Maiden Name" id="chkname" name="chkname" onclick=javascript:document.frmMain.mname.hidden=!document.frmMain.chkname.checked; />

<input type="input" hidden=true placeholder="Maiden Name" id="mname" name="mname"/>
...
</form>

【讨论】：