HTML显示此框中选择

这是我第一次编程和一直在努力解决这个问题，该单选按钮。搜索多个答案但仍然无法获得结果。我试图做的是，如果电台“用户名”中选择显示用户名和密码框，如果选择的凭证单选按钮显示凭证盒。这里是代码，现在它会显示所有的框。单选按钮不起作用。谢谢。HTML显示此框中选择

<form action="" method="post"> 
<input type="radio" name="selectLogin" id="password" value="1" onclick = "choiceType()" checked />Username 
<input type="radio" name="selectLogin" id="voucher" value="0" onclick = "choiceType()" />Voucher 
</form> 

function choiceType() { 
if (document.getElementById('password').checked) { 
    <div id="login-box-name" style="margin-top:20px;">Username:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_user" type="text" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div> 
    <div id="login-box-name" style="margin-top:20px;">Password:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_pass" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div> 
    } else { 
    <div id="login-box-name" style="margin-top:20px;">Voucher:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_voucher" type="text" class="form-login" title="Voucher" value="" size="30" maxlength="2048" /></div> 
    } 
}

来源

2013-03-10 user2153908

JavaScript不喜欢PHP工作;你不只是将字符串回复到DOM（大部分时间）。这甚至不是语法上有效的 - 看在浏览器的错误控制台，你会看到错误消息。此外，它看起来像要呈现2个元素具有相同的ID，这是在HTML _also_无效的，因为元素的ID必须是唯一的。你应该用[DOM API方法（https://developer.mozilla.org/en-US/docs/DOM）来控制HTML。 – 2013-03-10 14:27:14

<div id="voucherId" style="margin-top:20px;">Voucher:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_voucher" type="text" class="form-login" title="Voucher" value="" size="30" maxlength="2048" /></div> 

    <div id="userNameId" style="margin-top:20px;">Username:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_user" type="text" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div> 
    <div id="passwordId" style="margin-top:20px;">Password:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_pass" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div> 


    function choiceType() { 
      var inputs = document.getElementsByName("selectLogin"); 

      for (var i = 0; i < inputs.length; i++) { 
       if (inputs[i].checked) { 
        if(inputs[i].value =="1") 
          { 
          document.getElementById("voucherId").style.display = "block"; 
          document.getElementById("userNameId").style.display = "none"; 
          document.getElementById("passwordId").style.display = "none"; 

          } 

          else (inputs[i].value =="0") 
          { 
          document.getElementById("voucherId").style.display = "none"; 
          document.getElementById("userNameId").style.display = "block"; 
          document.getElementById("passwordId").style.display = "block"; 
          } 

         } 
        } 
}

来源

2013-03-10 14:27:56 PSR

谢谢。这是我正在寻找的。 – user2153908 2013-03-11 06:02:02

你必须使用：document.getElementById('you element id').innerHTML

document.getElementById('you element id').innerHTML='<div id="login-box-name" style="margin-top:20px;">Username:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_user" type="text" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div><div id="login-box-name" style="margin-top:20px;">Password:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_pass" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>';

来源

2013-03-10 14:28:21

HTML显示此框中选择

回答

相关问题