jquery - 显示页面元素默认 jquery

Question

我有一个注册页面，顶部有 2 个单选按钮（2 种注册类型）。

当第一个单选按钮被选中时，我看到了第一种类型的注册表格。当第二个单选按钮被选中时，我看到了第二种类型的表单。

我通过将 jquery 代码添加到单选按钮输入来实现它：

onclick="jQuery('.school_field').hide();jQuery('.priv_field').show();

问题：当我进入注册页面时，我看到了我创建的所有表格（用于 2 种注册类型）。如何在默认情况下显示第一类注册的表单？谢谢。

Answer 1

使用以下 CSSpriv_field在页面加载期间隐藏所有元素：

.priv_field { display: none; }

使用 jQuery 也可以实现同样的效果，尽管我没有看到它的案例：

$(function() { $('.priv_field').hide(); });

Answer 2

默认情况下，您需要在页面加载时隐藏表单并仅显示一个。

可能这有帮助

$(document).ready(function(){

    jQuery('.school_field').hide();
    jQuery('.priv_field').show();    

})

Answer 3

您可以使用 show() 和 hide() 。这有点简单

看看http://jsfiddle.net/nagoba/ZvQw6/

$(document).ready(function(){

    $("#form1").click(function(){

        $('#form2').attr('checked',false);
        $("#f1").show();
        $("#f2").hide();

    });

    $("#form2").click(function(){

        $('#form1').attr('checked',false); 
         $("#f2").show();
        $("#f1").hide();

    });

});

Answer 4

您的意思是隐藏/显示仅适用于第一/第二注册类型的字段，而不是表单？

当 DOM 准备好时，您应该检查最初选择了哪个单选按钮，然后基于此隐藏/显示字段。

$(document).ready(function() {
  if ($('input.radio-button-for-school').is(':selected')) {
    $('.priv_field').hide();
    $('.school_field').show();
  } else {
    $('.school_field').hide();
    $('.priv_field').show();
  }
});

请注意，在某些浏览器中，如果您将表单字段设置为特定值，然后重新加载页面，表单字段仍将保持相同的值。因此，IMO 仅仅假设您的默认单选按钮将始终是您加载页面时选择的单选按钮是不够的。如果用户提交表单但其中包含一些无效值，您可能还希望保留用户的输入。