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 に答える