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(); } });