带有 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) {

  if (val == 1) {

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

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

  } else {

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

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

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

Answer 2

您可以在窗口加载时调用相同的函数 showLogin。这是您可以处理此问题的方法之一。另一种方法可能是在同一脚本块中使用参数调用您的方法 showLogin（）。请参阅下面的示例。

方法 1：

window.onload = function(){

      showLogin(1)

    }

方法 2：

<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', '');

      }

    }

    showLogin(1)

</script>

Answer 3

答案很有用，您也可以将移动登录类型的val设置为1，并将css设置为文档准备就绪，如下所示

<script type="text/javascript">

    $(document).ready(()=>{

        $('#rbtnLoginTypeMobile').val(1)

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

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

    })

    function showLogin(val)

    {

    if(val==1)

    {

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

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

    }

    else

    {

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

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

    }

  }

</script>

Answer 4

获取 的值，然后以值作为参数进行调用。checked inputshowLogin

function showLogin(val) {

  if (val == 1) {

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

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

  } else {

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

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

  }

}

const val = document.querySelector('input:checked').value;

if (val) {

  showLogin(val);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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