jQuery 单选按钮切换

时间:2023-03-09 01:49:40
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 单选按钮切换