带有 javascript 的单选按钮

Question

我有一个单选按钮，显示一些带有javascript的文本框。我的代码具有onclick功能，因此首先它显示所有文本框。我尝试选中功能以选择拳头选项，因此它仅在加载时显示第一个文本框（无需单击），但没有运气。我不知道如何使第一个选项被选中，只显示第一个文本框！

<div class="radioBtns">

      <label for='rbtnLoginTypeMobile'>

           <input checked type="radio" id="rbtnLoginTypeMobile" name="rbtnLoginType" value='1' onclick="showLogin(1)"/>

           <span>Mobile</span>

      </label>

      <label for='rbtnLoginTypeEmail'>

           <input type="radio" id="rbtnLoginTypeEmail" name="rbtnLoginType" value='0' onclick="showLogin(0)" />

           <span>Email</span>

      </label>

</div>

<div class="mobilelogin">

      <div class="form-group">

           <input type="number" id="mobilelogin" class="form-control form-control-user" name="mobilelogin" placeholder="<?php _e('Mobile') ?>">

       </div>

</div>

<div class="emaillogin">

       <div class="form-group">

           <input type="Email" id="ُemaillogin" class="form-control form-control-user" name="emaillogin" placeholder="<?php _e('Email') ?>">

       </div>

       <div class="form-group">

           <input type="number" id="ُemaillogin-ver-code" class="form-control form-control-user" name="emaillogin-ver-code" placeholder="<?php _e('Email Verification Code') ?>">

       </div>

</div>

<script type="text/javascript">

       function showLogin(val){

          if(val==1)

          {

            $('.emaillogin').css('display','none');

            $('.mobilelogin').css('display','');

          }

          else

          {

            $('.mobilelogin').css('display','none');

            $('.emaillogin').css('display','');

          }

       }

</script>

Answer 1

当您的页面加载时，仅加载您的电子邮件输入框.即：hide//to hide email textbox on load$('.emaillogin').css('display', 'none');function showLogin(val) {&nbsp; if (val == 1) {&nbsp; &nbsp; $('.emaillogin').css('display', 'none');&nbsp; &nbsp; $('.mobilelogin').css('display', '');&nbsp; } else {&nbsp; &nbsp; $('.mobilelogin').css('display', 'none');&nbsp; &nbsp; $('.emaillogin').css('display', '');&nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="radioBtns">&nbsp; <label for='rbtnLoginTypeMobile'><input checked type="radio" id="rbtnLoginTypeMobile" name="rbtnLoginType" value='1' onclick="showLogin(1)"/><span>Mobile</span></label>&nbsp; <label for='rbtnLoginTypeEmail'><input type="radio" id="rbtnLoginTypeEmail" name="rbtnLoginType" value='0' onclick="showLogin(0)" /><span>Email</span></label></div><div class="mobilelogin">&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="number" id="mobilelogin" class="form-control form-control-user" name="mobilelogin" placeholder="<?php _e('Mobile') ?>">&nbsp; </div></div><div class="emaillogin">&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="Email" id="ُemaillogin" class="form-control form-control-user" name="emaillogin" placeholder="<?php _e('Email') ?>">&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="number" id="ُemaillogin-ver-code" class="form-control form-control-user" name="emaillogin-ver-code" placeholder="<?php _e('Email Verification Code') ?>">&nbsp; </div></div>

Answer 2

您可以在窗口加载时调用相同的函数 showLogin。这是您可以处理此问题的方法之一。另一种方法可能是在同一脚本块中使用参数调用您的方法 showLogin（）。请参阅下面的示例。方法 1：window.onload = function(){&nbsp; &nbsp; &nbsp; showLogin(1)&nbsp; &nbsp; }方法 2：<script type="text/javascript">&nbsp; &nbsp; function showLogin(val) {&nbsp; &nbsp; &nbsp; if (val == 1) {&nbsp; &nbsp; &nbsp; &nbsp; $('.emaillogin').css('display', 'none');&nbsp; &nbsp; &nbsp; &nbsp; $('.mobilelogin').css('display', '');&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $('.mobilelogin').css('display', 'none');&nbsp; &nbsp; &nbsp; &nbsp; $('.emaillogin').css('display', '');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; showLogin(1)</script>

Answer 3

答案很有用，您也可以将移动登录类型的val设置为1，并将css设置为文档准备就绪，如下所示<script type="text/javascript">&nbsp; &nbsp; $(document).ready(()=>{&nbsp; &nbsp; &nbsp; &nbsp; $('#rbtnLoginTypeMobile').val(1)&nbsp; &nbsp; &nbsp; &nbsp; $('.emaillogin').css('display','none');&nbsp; &nbsp; &nbsp; $('.mobilelogin').css('display','');&nbsp; &nbsp; })&nbsp; &nbsp; function showLogin(val)&nbsp; &nbsp; {&nbsp; &nbsp; if(val==1)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; $('.emaillogin').css('display','none');&nbsp; &nbsp; &nbsp; $('.mobilelogin').css('display','');&nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; $('.mobilelogin').css('display','none');&nbsp; &nbsp; &nbsp; $('.emaillogin').css('display','');&nbsp; &nbsp; }&nbsp; }</script>

Answer 4

获取 的值，然后以值作为参数进行调用。checked inputshowLoginfunction showLogin(val) {&nbsp; if (val == 1) {&nbsp; &nbsp; $('.emaillogin').css('display', 'none');&nbsp; &nbsp; $('.mobilelogin').css('display', '');&nbsp; } else {&nbsp; &nbsp; $('.mobilelogin').css('display', 'none');&nbsp; &nbsp; $('.emaillogin').css('display', '');&nbsp; }}const val = document.querySelector('input:checked').value;if (val) {&nbsp; showLogin(val);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="radioBtns">&nbsp; <label for='rbtnLoginTypeMobile'><input checked type="radio" id="rbtnLoginTypeMobile" name="rbtnLoginType"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value='1' onclick="showLogin(1)" /><span>Mobile</span></label>&nbsp; <label for='rbtnLoginTypeEmail'><input type="radio" id="rbtnLoginTypeEmail" name="rbtnLoginType" value='0'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onclick="showLogin(0)" /><span>Email</span></label></div><div class="mobilelogin">&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="number" id="mobilelogin" class="form-control form-control-user" name="mobilelogin" placeholder="<?php _e('Mobile') ?>">&nbsp; </div></div><div class="emaillogin">&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="Email" id="ُemaillogin" class="form-control form-control-user" name="emaillogin" placeholder="<?php _e('Email') ?>">&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="number" id="ُemaillogin-ver-code" class="form-control form-control-user" name="emaillogin-ver-code" placeholder="<?php _e('Email Verification Code') ?>">&nbsp; </div></div>