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 单选按钮切换的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  3. jquery 回车切换 tab功能

    挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...

  4. 基于jQuery上下切换的焦点图—带缩略图悬浮

    分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的.这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮 ...

  5. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  6. jquery mobile切换页面的几种方法

    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...

  7. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  8. Flex中利用单选按钮切换柱状图横纵坐标以及描述

    1.问题描述 一组单选按钮,有周和月之分,选择"周",柱状图横坐标显示的是周,纵坐标显示的是人数:选择"月",柱状图横坐标显示的月,纵坐标显示的是比率. 2.演 ...

  9. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

随机推荐

  1. [转]Android 应用的自动升级、更新模块的实现

    本文转自:http://www.oschina.net/question/163910_28462 我们看到很多Android应用都具有自动更新功能,用户一键就可以完成软件的升级更新.得益于Andro ...

  2. Eclipse中web项目的默认发布路径改为外部Tomcat中webapp路径

    可参考http://www.cnblogs.com/mihu/p/4772509.html 和http://www.cnblogs.com/dyllove98/archive/2013/06/07/3 ...

  3. android目录

    2013-09-121.activity生命周期 activity生命周期2 widget http://blog.csdn.net/xiang_j2ee/article/details/727564 ...

  4. SSH客户端

    Windows: winSCP SecureCRT Ubuntu: SecureCRT:安装方法http://www.phperstar.com/post/323

  5. 数组去重算法,quickSort

    function removeRepeat(arr) { var arr2 = [] ,obj = {}; for (var i = 0; i<arr.length; i++) { var nu ...

  6. c#抽象类相关

    abstract class mylass { public int age{get;set} public abstract void SaiHi(); } 1,抽象类中可以有实例成员,也可以有抽象 ...

  7. DynamicObject数据包操作

    DynamicObject的结构非常简单明了,就是一个字典,类似于一个Dictionary<string, object>,其中的object可能是一个简单值(普通字段),可能是一个复杂值 ...

  8. Java类加载的时机_4种主动引用会触犯类加载+剩下的被动引用不会触发类的加载

    转载自:http://chenzhou123520.iteye.com/blog/1597597 Java虚拟机规范没有强制性约束在什么时候开始类加载过程,但是对于初始化阶段,虚拟机规范则严格规定了有 ...

  9. 删除HT和CAS角色与扩展在另一台服务器

      背景:原先使用三合一方式部署的架构,如今不再满足企业需求,因此需要将原来的一台服务器多角色的拆分开,即由原来CAS.HT.MBX角色集一台服务器的分成两台服务器来部署,此架构为MBX角色单独部署在 ...

  10. UI4_注册登录界面

    // // ViewController.h // UI4_注册登录界面 // // Created by zhangxueming on 15/7/3. // Copyright (c) 2015年 ...