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

  • 相关阅读:
    TCP/IP四层模型
    Java编程题
    大整数阶乘的运算(可以计算1000!) .
    sleep和wait的区别
    Javascript保留字(Javascript Reserved Words)
    WEBLOGIC 内存溢出 解决方案
    Java学习的30个目标以及系统架构师推荐的书
    笔记分析
    MySQL分区(Partition)功能试验
    Java线程:生产者消费者模型
  • 原文地址:https://www.cnblogs.com/foreverfendou/p/5613803.html
Copyright © 2020-2023  润新知