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

  • 相关阅读:
    完整安装IIS服务
    IIS支持json、geojson文件
    C# ODP.Net oracle数据库操作 支持不安装客户端
    RabbitMQ —— spring标签整合实现(API介绍)
    RabbitMQ —— spring标签整合实现
    RabbitMQ —— spring整合发送异步消息
    RabbitMQ —— spring整合发送同步消息
    RabbitMQ Spring 相关类信息
    RabbitMQ 消息流转示意图
    RabbitDemo —— 延迟队列(在消息上设置TTL)
  • 原文地址:https://www.cnblogs.com/foreverfendou/p/5613803.html
Copyright © 2020-2023  润新知