zoukankan      html  css  js  c++  java
  • 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();
                }
            });

  • 相关阅读:
    [Android Pro] Android源码编译之Nexus5真机编译
    [设计模式] 策略模式(Strategy)
    [Android] Anreoid repo 切换分支
    [Android] repo 下载Android源码(国内镜像)
    [Android] osx下如何使用SublimeText阅读Android系统源码
    [Ubuntu] ubuntu的tty下挂载移动硬盘拷贝数据
    Elasticsearch
    Flink简介
    SQL中instr和like的使用区别
    count(1) 与 count(*) 比较
  • 原文地址:https://www.cnblogs.com/foreverfendou/p/5613803.html
Copyright © 2011-2022 走看看