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 434B B. Nanami's Digital Board(分治)
题目链接: B. Nanami's Digital Board time limit per test 1 second memory limit per test 256 megabytes inp ...
- hdu 1530 最大团模板
说明摘自:pushing my way 的博文 最大团 通过该博主的代码,总算理解了最大团问题,但是他实现时的代码效率却不算太高.因此在最后献上我的模板.加了IO优化目前的排名是: 6 yejinru ...
- oracle查看允许的最大连接数和当前连接数等信息
目前总结的语句,在查看数据的连接情况很有用 ,写完程序一边测试代码一边查看数据库连接的释放情况有助于分析优化出一个健壮的系统程序来. 1.Sql代码1.select count(*) from v$p ...
- NodeJS学习之异步编程
NodeJS -- 异步编程 NodeJS最大的卖点--事件机制和异步IO,对开发者并不透明 代码设计模式 异步编程有很多特有的代码设计模式,为了实现同样的功能,使用同步方式和异步方式编写代码会有很大 ...
- Part 14 Mathematical functions in sql server
Part 29 Mathematical functions in sql server
- Python Tool Visual Studio简单使用
由于一直在做.NET的开发,一直用的IDE是VS系列的,所以想用VS也能开发Python,刚好微软提供一个插件PTVS(Python Tool Visual Studio)专门应用于Python开发的 ...
- iOS访问通讯录开发-读取联系人信息
读取通信录中的联系人一般的过程是先查找联系人记录,然后再访问记录的属性,属性又可以分为单值属性和多值属性.通过下面例子介绍联系人的查询,以及单值属性和多值属性的访问,还有读取联系人中的图片数据. 本案 ...
- WCF之Host宿主
Self_hosting自托管宿主. 过程:手动创建Host实例,把服务端点添加到Host实例上,把服务接口与Host关联. 一个Host只能指定一个服务类型,但是可以添加多个服务端点,也可以打开多个 ...
- WCF之绑定
NameSpace+Name作为服务元数据的唯一标示.BindingElement描述Binding的特征. 绑定表示通信信道的配置,定义C/S间的协议. 分为:传输信道(TCP,HTTP…),消息编 ...
- 1. 走进java
走进java 1.java简介 1.1 java分类: 1.2 开发包JDK 1.3.一处编译,到处运行的特点 2. 配置开发环境 3. java基本语法 3.1关键字和保留字 3.2 标识符命名规则 ...