如果複選框被選中添加新的輸入框

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中的輸入元素之前。

---

如果你寧願使用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

你不應該使用孃家姓輸入框類型= 「隱藏」。如下使用它：

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