javascript - 当我重新加载页面并且没有选中 Laravel 6.0 中的单选按钮之一时,如何一次只显示一个表单

标签 javascript php jquery html laravel

如果您检查 radiobutton 之一,我在一个 View 中有两个表单只显示您想要的那个,问题是当您重新加载页面并且您没有检查任何单选按钮时显示您两种形式,我尝试输入 check到其中一台 radio ,但不起作用,仍然显示两种形式,我该如何解决问题

  • 下面我将让我的radiobutton的代码和 script在 jQuery 中,当您选择一个时,它会显示您想要的表单

代码radiobutton

<input type="radio" id="admin" value="administrador" name="tipo" >
                  <label for="admin">Admin</label>
                  <input type="radio" id="cliente" value="cliente" name="tipo">
                  <label for="natural">Cliente</label>

代码script在 jQuery 中

<script type="text/javascript">
      $(document).ready(function(){
        $('input:radio[id=admin]').attr('checked',true);
        $("#admin").on( "click", function() {
            $('#email_1').show(); //muestro mediante id
            $('#password_1').show();
            $('#email_2').hide();
            $('#password_2').hide();
        });
        $("#cliente").on( "click", function() {
          $('#email_1').hide(); //oculto mediante id
          $('#password_1').hide();
          $('#email_2').show();
          $('#password_2').show();
        });
      });
      </script>

最佳答案

不要等待某人单击按钮来隐藏第二个表单,而是确保它在默认情况下以及单击单选按钮时隐藏。

<script type="text/javascript">
      $(document).ready(function(){
        $('input:radio[id=admin]').attr('checked',true);
            $('#email_2').hide(); // Add this
            $('#password_2').hide();  // and this
        $("#admin").on( "click", function() {
            $('#email_1').show(); //muestro mediante id
            $('#password_1').show();
            $('#email_2').hide();
            $('#password_2').hide();
        });
        $("#cliente").on( "click", function() {
          $('#email_1').hide(); //oculto mediante id
          $('#password_1').hide();
          $('#email_2').show();
          $('#password_2').show();
        });
      });
      </script>

关于javascript - 当我重新加载页面并且没有选中 Laravel 6.0 中的单选按钮之一时,如何一次只显示一个表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59507876/

相关文章:

javascript - 在 meteor 的帮助程序中使用传递的 var

javascript - Angular JS 分割字符串

php - 如何选择相对于行最大值的行

PHPStorm 同步如何忽略行分隔符?

jquery - 使用 EPPLUS - MVC 获取文件 excel 后,将日期 mm/dd/yyyy 更改为 dd/mm/yyyy

javascript - jQuery 正则表达式匹配返回空字符串

javascript - 打印 4 到 9999 之间的数字的根

php - 不存在的地方 - MYSQL/PHP

jquery - 我如何通过 jquery 和 ajax 替换图像(在 div 内)

javascript - Jquery追加不显示div