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