带有javascript的单选按钮

我有一个单选按钮，显示一些带有javascript的文本框。 我的代码有onclick函数，所以它首先显示所有的文本框。 我尝试了选中函数来选择fist选项，这样它在加载时只显示第一个文本框（没有单击），但没有运气。 我不知道如何使第一个选项处于选中状态，并且只显示第一个文本框

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

可移动的
电子邮件
当您的页面加载时，只需隐藏您的电子邮件输入框。即：


//在加载时隐藏电子邮件文本框
$（'.emaillogin'）.css（'display'，'none'）；
函数showLogin（val）{
如果（val==1）{
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
}否则{
$（'.mobilelogin'）.css（'display'，'none'）；
$（'.emaillogin'）.css（'display'，''）；
}
}

可移动的
电子邮件
当您的页面加载时，只需隐藏您的电子邮件输入框。即：


//在加载时隐藏电子邮件文本框
$（'.emaillogin'）.css（'display'，'none'）；
函数showLogin（val）{
如果（val==1）{
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
}否则{
$（'.mobilelogin'）.css（'display'，'none'）；
$（'.emaillogin'）.css（'display'，''）；
}
}

可移动的
电子邮件
获取
选中输入的值
，然后以值作为参数调用
showLogin


函数showLogin（val）{
如果（val==1）{
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
}否则{
$（'.mobilelogin'）.css（'display'，'none'）；
$（'.emaillogin'）.css（'display'，''）；
}
}
const val=document.querySelector（'input:checked'）。值；
if（val）{
showLogin（val）；
}

可移动的
电子邮件
获取
选中输入的值
，然后以值作为参数调用
showLogin


函数showLogin（val）{
如果（val==1）{
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
}否则{
$（'.mobilelogin'）.css（'display'，'none'）；
$（'.emaillogin'）.css（'display'，''）；
}
}
const val=document.querySelector（'input:checked'）。值；
if（val）{
showLogin（val）；
}

可移动的
电子邮件
您可以在WindowOnLoad上调用相同的函数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>


函数showLogin（val）{
如果（val==1）{
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
}否则{
$（'.mobilelogin'）.css（'display'，'none'）；
$（'.emaillogin'）.css（'display'，''）；
}
}
showLogin（1）
您可以在窗口加载时调用相同的函数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>


函数showLogin（val）{
如果（val==1）{
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
}否则{
$（'.mobilelogin'）.css（'display'，'none'）；
$（'.emaillogin'）.css（'display'，''）；
}
}
showLogin（1）
@Swati，答案很有用，
此外，您只能将移动登录类型的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>


$（文档）.ready（（）=>{
$（'rbtnlogintypomobile'）.val（1）
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
})
函数showLogin（val）
{
如果（val==1）
{
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
}
其他的
{
$（'.mobilelogin'）.css（'display'，'none'）；
$（'.emaillogin'）.css（'display'，''）；
}
}
@Swati，答案很有用，
此外，您只能将移动登录类型的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>


$（文档）.ready（（）=>{
$（'rbtnlogintypomobile'）.val（1）
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
})
函数showLogin（val）
{
如果（val==1）
{
$（'.emaillogin'）.css（'display'，'none'）；
$（'.mobilelogin'）.css（'display'，''）；
}
其他的
{
$（'.mobilelogin'）.css（'display'，'none'）；
$（'.emaillogin'）.css（'display'，''）；
}
}
您可以在div中设置“display:none；”



您可以在div中设置“display:none；”



你不能在函数声明之后简单地添加
showLogin（1）
吗？仅供参考，我删除了PHP标签。为了将来的参考，只添加与您的问题相关的标记。您不能简单地在函数声明之后添加
showLogin（1）
？仅供参考，我删除了PHP标记。供日后参考,，仅添加与您的问题相关的标记。如果将默认选中项从移动输入更改为电子邮件输入，这将产生不正确的结果。@random yes您是对的，但op希望第一个选项选中并仅显示第一个文本框。如果将默认选中项从移动输入更改为电子邮件输入，这将产生不正确的结果。@random yes您是对的，但op希望第一个选项选中并仅显示第一个文本框。