0

这是我第一次编程并试图解决这个问题。搜索许多放置的答案，但仍然无法得到结果。我正在尝试做的是，如果选择了单选“用户名”，则显示用户名和密码框，如果选择了凭证单选按钮，则显示凭证框。这是代码，现在它将显示所有框。单选按钮不起作用。谢谢。

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

2 回答 2

0 
   <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-10T14:27:56.590 回答
0

你必须使用：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-10T14:28:21.983 回答