如何在未选中单选按钮时隐藏内容并允许查看其他内容

Question

基本上我想设置两个单选按钮，一个叫'Login'，另一个叫'Register'

选中 'Login' 单选按钮后，我希望仅显示登录部分，反之亦然 'Register' 按钮。

非常感谢任何帮助

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h2 class="text-center"><img src="//placehold.it/110" class="img-circle"><br>Login</h2>
                <div class="container">
  <form role="form">
    <label class="radio-inline">
      <input type="radio" name="optradio">Login
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Register
    </label>
  </form>
</div>
            </div>
            <div style="width:602px"class="modal-body row">
                                    <form action="" method="post">
                                            <div class="row">
                                            <div style="padding-left:20px; padding-right:-20px class="col-sm-12 text-center">
                                        <div class="form-group">
                                            <label for="username">Username</label>
                                            <input id="name" name="username" placeholder="Username" type="text" tabindex="1" class="form-control">
                                        <div class="form-group">
                                            <label for="password">Password</label>
                                            <input id="password" name="password" placeholder="Password" type="password"   tabindex="2" class="form-control">
                                            <br>
                                            <input class="form-control btn btn-success" name="submit" type="submit" value="Log In" id="submit" tabindex="4" >
                                            <h4>Not a member? <label class="checkbox-Warning"><input type="checkbox" value=""></label></h4>
                                            <!-- come back here and finished login and registration -->



                                    <div class="text-center"><h3 style="text-align:center"><b>Register</b></h3></div>
                                    <form id="register-form" action="index.php" method="post" role="form">
                                        <div class="form-group has-feedback">
                                            <label for="username">Username</label>
                                            <span class="form-control-feedback input-validator-feedback" data-fieldname="username"></span>
                                            <input type="text" name="newusername" id="newusername" tabindex="1" class="form-control validate-input" placeholder="Username" value="" autocomplete="off">
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label for="email">Email Address</label>
                                            <span class="form-control-feedback input-validator-feedback" data-fieldname="email"></span>
                                            <input type="text" name="newemail" id="email" tabindex="2" class="form-control validate-input" placeholder="Email Address" value="" autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <label for="password">Password</label>
                                            <input type="password" name="newpassword1" id="password" tabindex="3" class="form-control" placeholder="Password" autocomplete="off">
                                        </div>
                                        <div class="form-group">
                                            <label for="confirm-password">Confirm Password</label>
                                            <input type="password" name="confirm-password1" tabindex="4" id="confirm-password1" class="form-control" placeholder="Confirm Password" autocomplete="off">
                                            <br>
                                                <input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-success" value="Register">
                                            </div>
                                        </div>  
                                    </div>
                                </div>
                            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

所以当登录单选按钮被选中时，所有的登录都应该是可见的，并且所有的注册组件应该被隐藏

Answer 1

设置一个事件处理程序来通知单选按钮是否被勾选，并响应单选按钮上的点击事件。

与jQuery:

$("input[type=radio]").on('click', function () {
   $(container).empty();
   var newSection = $('input[type=radio]:checked').value; //Get name of the new section
   $(container).append($('div.' + newSection));
});

在此点击事件中，删除部分中的 html 并附加您想要的新部分。

这个答案不一定适合您当前的代码，但它是您如何处理它的一个概念

Answer 2

我为 document.getElementById 的两个按钮添加了一个 ID。

<input type="radio" name="optradio" value="login" id="login-button" >
<input type="radio" name="optradio" value="register" id="register-button">
<script>
document.getElementById("login-button").addEventListener("click", function(){
     document.querySelector('#login-div').style.display = 'initial';
     document.querySelector('#register-div').style.display = 'none';
}, false);
document.getElementById("register-button").addEventListener("click", function(){
     document.querySelector('#register-div').style.display = 'initial';
     document.querySelector('#login-div').style.display = 'none';
}, false);
</script>

Answer 3

您可以为单选按钮指定不同的 classes/id，例如 "registerbutton" 和 "loginbutton"。

如果您给注册部分 class/id "register" 和登录部分 class/id "login"，您可以用 jQuery 定位它们。

您可以将以下代码放在 <script> 个标签之间。

$('.registerbutton').click( function() {
   $('.login').css('display', 'none')
   $('.register').css('display', 'inline-block')
});

$('.loginbutton').click( function() {
   $('.login').css('display', 'inline-block')
   $('.register').css('display', 'none')
});

jQuery 与 css 选择器一起使用，因此 '.loginbutton' 与 class 登录按钮一起使用。如果您提供元素 ID，则应将“.loginbutton”替换为“#loginbutton”。

我不知道您是否使用过 jQuery，但如果您还没有：请不要忘记 link 一个 jQuery 库。用过也不要忘记。

如果你把它放在结束 </body> 标签的右边，它应该可以工作。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
   $('.registerbutton').click( function() {
      $('.login').css('display', 'none')
      $('.register').css('display', 'inline-block')
   });

   $('.loginbutton').click( function() {
      $('.login').css('display', 'inline-block')
      $('.register').css('display', 'none')
   });
</script>

第一个 <script> 标签 link 是带有函数的库，第二个标签调用函数使它工作。如果你给 de html 元素正确的 classes/id。

如何在未选中单选按钮时隐藏内容并允许查看其他内容

How to hide content when a radio button is not checked and enable other content to be viewed

html

javascript

css

modal-dialog

twitter-bootstrap-3