使用单选按钮隐藏和显示文本输入

Posted

技术标签:

【中文标题】使用单选按钮隐藏和显示文本输入【英文标题】:make text input hide and show with radio button 【发布时间】:2020-05-05 17:42:03 【问题描述】:

我正在尝试制作一个带有 2 个选项的单选按钮,即选项 A 和选项 B。 我有 2 个文本输入( A 和 B )和其他一些必须始终存在的文本输入。

单选按钮的选项 A 必须使文本输入 (A) 消失并显示另一个文本输入 (B)。选项 B 应该相反。 (消失文本输入(B)并显示另一个文本输入(A))

我不知道如何进行这 2 个文本输入。 将不胜感激。

<form class="user" id="RegisterForm" action="" method="post">

 <? print("USER ROLE : ") ?>
  <input type="radio" name="user_role"  <?php if (isset($user_role) && $user_role=="A") echo "checked";?> value="A">A
  <input type="radio" name="user_role" <?php if (isset($user_role) && $user_role=="B") echo "checked";?> value="B">B

  //REST OF the code defines some text inputs that are always should show.

  <?php if ($fullname_req != "-1")  ?>
      <div class="form-group">
          <input type="text" class="form-control form-control-user" id="displayname" name="fullname" placeholder="<?php _e('Display name', 'user-panel-pro') ?>">
      </div>
  <?php  ?>
  <?php if ($firstname_req != "-1")  ?>
  <div class="form-group row">
      <?php if ($firstname_req != "-1" or $lastname_req != "-1")  ?>
      <div class="col-sm-6 mb-3 mb-sm-0">
          <input type="text" class="form-control form-control-user" id="First-Name" name="firstname" placeholder="<?php _e('first name', 'user-panel-pro') ?>">
      </div>
      <?php  ?>
      <?php if ($lastname_req != "-1")  ?>
      <div class="col-sm-6">
          <input type="text" class="form-control form-control-user" id="Last-Name" name="lastname" placeholder="<?php _e('last name', 'user-panel-pro') ?>">
      </div>
      <?php  ?>
  </div>
  <?php  ?>
  <?php if ($username_req != "-1")  ?>
  <div class="form-group">
      <input type="text" class="form-control form-control-user" id="User-Name" name="username" placeholder="<?php _e('Username', 'user-panel-pro') ?>">
  </div>
  <?php  ?>
  <?php if ($email_req != "-1")  ?>
  <div class="form-group">
      <input type="email" class="form-control form-control-user" id="Email" name="email" placeholder="<?php _e('Email', 'user-panel-pro') ?>">
  </div> 
  <?php  ?>

【问题讨论】:

选项A和选项B的输入文本是什么? 选项(A)应该调出文本输入(B),它是数字输入,选项(B)应该调出文本输入(A),它也是数字但具有不同的ID。 【参考方案1】:

我看不懂你的代码,所以我只是做一个小演示

<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">Your Mobile Div</div>
<div class="emaillogin">Your Email 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>

【讨论】:

以上是关于使用单选按钮隐藏和显示文本输入的主要内容,如果未能解决你的问题,请参考以下文章

如何用Jquery控制单选按钮点击否然后隐藏其他文本框

Razor 显示/隐藏基于使用 javascript 的单选按钮

隐藏单选按钮图标但不隐藏文本

根据表格数据隐藏和显示单选按钮

根据单选按钮单击显示和隐藏 div [重复]

基于单选按钮选择使用 CSS 显示/隐藏链接