单击锚标记时如何显示和隐藏输入？

Question

如何在单击“ Edit时隐藏label并显示input并在Cancel时显示label并隐藏input ？

<label class="lblProfile">First Name: </label>
<label class="ansProfile">${resident.firstname}</label>
<input id="firstname"name="firstname" type="text" placeholder="${resident.firstname}"/>
<a> Edit </a>
<a> Cancel </a>

谁能告诉我如何编码？

Answer 1

像下面这样的东西应该可以解决问题。

 function showhide(which){ var edit = document.getElementById('edit'); var cancel = document.getElementById('cancel'); var input = document.getElementById('firstname'); var label = document.getElementsByClassName('ansProfile')[0]; if(which==='edit'){ if(edit.checked){ cancel.checked=false; label.style.display='none'; input.style.display='inline'; }else{ label.style.display='inline'; } }else{ if(cancel.checked){ edit.checked=false; label.style.display='inline'; input.style.display='none'; }else{ input.style.display='inline'; } } }

 <label class="lblProfile">First Name: </label> <label class="ansProfile">${resident.firstname}</label> <input id="firstname"name="firstname" type="text" placeholder="${resident.firstname}"/> <input id='edit' type='checkbox' onClick='showhide("edit")'/> Edit <input id='cancel' type='checkbox' onClick='showhide("cancel")'/> Cancel