jQuery 单选按钮切换
html代码片段一:
<div class="row">
<div class="col-sm-12">
<label for="PersonnelType" class="col-sm-1 control-label">类型</label>
<div class="col-sm-6">
<div class="col-sm-4">
<label class="checkbox-inline">
<input type="radio" name="PersonnelType" id="optionsRadios1"
value="1"> 医生
</label>
</div>
<div class="col-sm-4">
<label class="checkbox-inline">
<input type="radio" name="PersonnelType" id="optionsRadios2"
value="2"> 患者
</label>
</div>
<div class="col-sm-4">
<label class="checkbox-inline">
<input type="radio" name="PersonnelType" id="optionsRadios3"
value="3"> 业务人员
</label>
</div>
</div>
<div class="col-sm-3">
<input id="txt_codesegment" name="txt_codesegment" class="form-control" type="text" placeholder="请输入号段">
</div>
<div class="col-sm-1" style="text-align:right">
<button id="build" class="btn btn-primary">
查询
</button>
</div>
<br />
<br />
</div>
</div>
html代码片段二:
<div id="resultCount">
<div class="row">
<div class="col-sm-12">
<label for="" class="col-sm-2 control-label">共有医生编码</label>
<div class="col-sm-10">
<div class="col-sm-12">
<label for="">239个</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="DoctorName" class="col-sm-2 control-label">患者编码</label>
<div class="col-sm-10">
<div class="col-sm-12">
<label for="">7878个</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="" class="col-sm-2 control-label">业务人员编码</label>
<div class="col-sm-10">
<div class="col-sm-12">
<label for="">45个</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--医生 开始-->
<div class="ibox-content" id="Personnel_1" style="display:none">
<div class="row"><div class="col-sm-12 col-md-12"> <h4 class="modal-title" id="">医生</h4></div></div>
<br /> <table id="tablePersonnelTable_doctor" class="table table-bordered table-striped table-hover" cellspacing="0"></table>
</div>
<!--医生 结束-->
<!--患者 开始-->
<div class="ibox-content" id="Personnel_2" style="display:none">
<div class="row"><div class="col-sm-12 col-md-12"> <h4 class="modal-title" id="">患者</h4></div></div>
<br /> <table id="tablePersonnelTable_patien" class="table table-bordered table-striped table-hover" cellspacing="0"></table>
</div>
<!--患者 结束-->
<!--业务人员 开始-->
<div class="ibox-content" id="Personnel_3" style="display:none">
<div class="row"><div class="col-sm-12 col-md-12"> <h4 class="modal-title" id="">业务人员</h4></div></div>
<br /> <table id="tablePersonnelTable_business" class="table table-bordered table-striped table-hover" cellspacing="0"></table>
</div>
<!--业务人员 结束-->
jQuery 代码:
$("input[type='radio']").click(function () {
var id = $(this).attr("id");
var value = $(this).attr("value");
if (value == 1) {
$("#Personnel_1").show();
$("#Personnel_2").hide();
$("#Personnel_3").hide();
$("#resultCount").hide();
}
if (value == 2) {
$("#Personnel_1").hide();
$("#Personnel_2").show();
$("#Personnel_3").hide();
$("#resultCount").hide();
}
if (value == 3) {
$("#Personnel_1").hide();
$("#Personnel_2").hide();
$("#Personnel_3").show();
$("#resultCount").hide();
}
});

jQuery 单选按钮切换的更多相关文章
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- jquery 回车切换 tab功能
挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...
- 基于jQuery上下切换的焦点图—带缩略图悬浮
分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的.这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮 ...
- FlexSlider是一个非常出色的jQuery滑动切换插件
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- Flex中利用单选按钮切换柱状图横纵坐标以及描述
1.问题描述 一组单选按钮,有周和月之分,选择"周",柱状图横坐标显示的是周,纵坐标显示的是人数:选择"月",柱状图横坐标显示的月,纵坐标显示的是比率. 2.演 ...
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
随机推荐
- codeforces 680C C. Bear and Prime 100(数论)
题目链接: C. Bear and Prime 100 time limit per test 1 second memory limit per test 256 megabytes input s ...
- Android渠道汇总
序号 渠道名 渠道说明 特殊渠道 1 googleplay google市场 2 umeng 自动更新 3 office_web 官方网络 4 office_qrcode 官方二维码 硬件 ...
- Quartz.Net使用
相关的Quartz的Demo https://yunpan.cn/cY3GZGcyTSQxu 访问密码 8b60 官方的写的也挺仔细的.http://www.quartz-scheduler.net ...
- java实现Composite(组合)模式
组合模式涉及的是一组对象,其中一些对象可能含有其他对象,这些对象也可以含有对象,因此,有些对象代表的是对象群组. Composite模式的设计意图在于:让所有的用户能够用统一的接口处理单个对象以及对象 ...
- 64位系统下注册32位dll文件
64位系统下注册32位dll文件 在64位系统里注册32位软件所需的一些dll会提示不兼容,大概因为32 位进程不能加载64位Dll,64位进程也不可以加载32的导致. 若要支持的32 位和64 位C ...
- 20150222—LINQ to SQL 插入、更新和删除
注意,使用LINQ to SQL时, 表中必须有一个主键才可以起效,否则系统将无法对数据作出修改 插入新数据,根据上一片的文章实例在其中添加新的控件: 编号TextBox(Name):sno 名字Te ...
- AD查询1000条限制和解决方案
公司的一个项目要从AD上取数据,为了测试性能,批量在AD上创建了2000多个用户.但是用java程序获取所有用户的时候会报错或者只能取到1000条数据. 条数据. 用org.springfra ...
- 杭电ACM2085--核反应堆
http://acm.hdu.edu.cn/showproblem.php?pid=2085 这也是一个简单的的递推. a[i][0] = 3*a[i-1][0]+2*a[i-1][1]; a[i][ ...
- CSS3/jQuery创意盒子动画菜单
作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示 ...
- 《RPM源码包的制作》RHEL6
一下rpm包的创建不含编译部分: 首先写个脚本,这个脚本是你想干的事..useradd.sh是我写的脚本,批量添加20个用户.我们创建一个目录,将脚本放进去: 将此目录压缩: 我们将校验的key导出: ...