Question

我有一个这样的表格

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

如果勾选了复选框，那么首页名称输入框应该是可见的，任何人都可以帮我解决此问题。

Answer 1

在这个例子中，没有JavaScript就可以这样做，只需使用:checked伪类：

EXAMPLE HERE

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

使用常规同级组合子~或相邻的同级组合子+，可以在切换复选框元素时更改input元素的显示。当然，这假定复选框位于DOM中的input元素之前。

如果您更愿意使用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 = '';
    }
});

或者，如果您希望将添加 input元素添加到DOM（如标题所示），而不是更改其可见性，可以使用这样的东西：

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

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

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

如果选中复选框，请添加新输入框

3 个答案: