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 ...
随机推荐
- HDU 1003 Max Sum && HDU 1231 最大连续子序列 (DP)
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- CentOS 6.5_X64下安装MongoDB数据库
1.下载MongoDB 官网下载地址:https://www.mongodb.org/downloads 具体链接:https://fastdl.mongodb.org/linux/mongodb-l ...
- Unity之读取本地图片
1.下载Opencv for unity. 2.把OpenCVForUnity下的StreamingAssets拖到Assets下. 3.点击Tools->opencv for unity-&g ...
- C#操作ini
/// <summary> /// 读写INI文件的类. /// </summary> public class INIHelper { // 读写INI文件相关. [DllI ...
- 【转载】Hadoop可视化分析利器之Hue
http://qindongliang.iteye.com/blog/2212619 先来看下hue的架构图: (1)Hue是什么? Hue是一个可快速开发和调试Hadoop生态系统各种应用的一个基 ...
- PHP和CS的引用传值
PHP的引用传值 function change_value($num){ $num+=2; } $age = 3; change_value(&$age); echo $age; CS的引用 ...
- 【转】使用SharpZipLib实现zip压缩
使用国外开源加压解压库ICSharpCode.SharpZipLib实现加压,该库的官方网站为 http://www.icsharpcode.net/OpenSource/SharpZipLib/Do ...
- View的setOnClickListener的添加方法
1)第一种,也是最长见的添加方法(一下都以Button为例) 1 Button btn = (Button) findViewById(R.id.myButton);2 btn .setOnClick ...
- Android处理Bitmap使其能够不失真等比缩放裁剪后显示在ImageView上
Android开发过程中,我们有时需要动态得显示一些图片,并且这些图片的大小差距会十分大,如果需求并不是需要图片完整显示,但是需要不失真,并且要图片中间部分的情况下,我们需要做一系列处理,因为这个时候 ...
- Linux 文件及文件夹权限
普及 linux 基础知识,Linux 文件及文件夹权限,不要动不动就 777 权限.网上教程过于复杂啰嗦,简单总结如下...一.查看 Linux 文件权限 ls -l (通用)ll (Ubuntu适 ...