jQuery 单选按钮切换
jQuery 切换 按钮 单选
2023-09-11 14:19:36 时间
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选择器ID、CLASS、标签获取对象值、属性、设置css样式
- jQuery补充,模拟图片放大镜
- jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法
- jQuery.delegate() 函数详解
- 电子签章盖章之jQuery插件jquery.zsign
- IE下使用jquery ajax失效的原因
- jQuery Custom Selector JQuery自定义选择器
- 使用jquery在前台页面验证url网址输入是否正确
- JQuery模板插件jquery.tmpl-动态ajax扩展
- jQuery easyUI--弹窗的使用
- Telerik Kendo UI for jQuery 2021 R2 SP1 Retail
- Uncaught ReferenceError: $ is not defined之解决jquery引用不成功的办法
- Jquery ajax json 不执行success的原因 坑爹
- jQuery表格排序总成-tablesorter
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连续7-电话问卷调查
- python web py入门(69)- jQuery - 实现页面显示字体的格式切换
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
- jQuery(一)jQuery概述、使用方式、原理、查找元素
- JavaWeb——jQuery九大选择器