时间戳

首页 > 解决方案 > 使用 jQuery 中的切换按钮隐藏某些输入并显示其他输入

javascript - 使用 jQuery 中的切换按钮隐藏某些输入并显示其他输入

问题描述

你好 Stackoverflow 社区，希望你做得很好，我想要做的是当我点击切换按钮时，我希望它隐藏某些输入并显示其他输入，我的代码是一个添加学生和教师的表单，因为那里是常见的输入，当我按下开关按钮时，我很难隐藏不常见的输入，当我再次点击它时，做相反的事情，但所有这些似乎都失败了，我只能隐藏一些，当我再次点击它时它不会工作，这里我做了什么：

jQuery代码：

$(document).ready(function(){
    $('.teacher').hide();
    $('.switch').click(function(){
        $('.student').hide();
        $('.teacher').show();
    });
});

HTML 代码：

 <label>Student&nbsp;</label>
                                    <label class="switch">
                                      <input type="checkbox" id="switchVal" value="0">
                                      <span class="slider"></span>
                                    </label> 
                                    <label>&nbsp;Teacher</label>

标签： javascriptjqueryhideshow

解决方案

$('.teacher').hide();
  $('.switch').click(function() {
    $('.student').toggle();
    $('.teacher').toggle();
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='student'>Student</div>
<div class="switch">
  <input type="checkbox" id="switchVal" value="0">
  <span class="slider"></span>
</div>
<div class='teacher'>Teacher</div>

推荐阅读