方式1 ：checkbox

先看效果

源码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

function getSelected(){

    let arr = [];

    $("input[id^='check']:checked").each(function () {

         arr.push($(this).val());

    });

    document.getElementById("demo").innerHTML='你选中了：'+arr.join(',');

}

</script>

</head>

<body>

<form>

<input type="checkbox" id="check1" value='1'>level 1

<input type="checkbox" id="check2" value='2'>level 2

<input type="checkbox" id="check3" value='3'>level 3

<input type="checkbox" id="check4" value='4'>level 4

</form>

<br/><br/>

<button onclick="getSelected()">统计选中</button>

<p id="demo"></p>

</body>

</html>

-----------------------------------------------------------------

 方式2 ：button

先看效果，颜值更高

源码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

    $('button').click(function(){

        //每次点击的时候，切换当前的元素样式

         $(this).toggleClass('active');

    });

});

function myFunction(){

    var levelArr=[];

    $('button.level.active').each(function () {

        levelArr.push($(this).val());

    });

    $("#demo").text('选中了：'+levelArr.join(','));

}

</script>

<style type="text/css">

/* 样式默认为绿色 */

button.level {

outline: none;

border: 1px solid #00850B;

border-radius: 4px;

background: #FFFFFF;

font-family: PingFangSC-Medium;

font-size: 14px;

color: #00850B;

text-align: center;

line-height: 18px;

}

/* 选中后样式 */

button.green.active{

   color: #FFFFFF;

   background:#00850B;

}

/* 覆盖默认样式 */

button.blue {

border: 1px solid #1273C7;

background: #FFFFFF;

color: #1273C7;

}

button.blue.active{

   color: #FFFFFF;

   background:#1273C7;

}

button.yellow {

border: 1px solid #E3AD2F;

background: #FFFFFF;

color: #E3AD2F;

}

button.yellow.active{

   color: #FFFFFF;

   background:#E3AD2F;

}

button.red {

border: 1px solid #D60505;

background: #FFFFFF;

color: #D60505;

}

button.red.active{

   color: #FFFFFF;

   background:#D60505;

}

</style>

</head>

<body>

<button class="level green" value='1'>level 1</button>

<button class="level blue" value='2'>level 2</button>

<button class="level yellow" value='3'>level 3</button>

<button class="level red" value='4'>level 4</button>

<br/><br/>

<button type="button" onclick="myFunction()">统计选中</button>

<p id="demo"></p>

</body>

</html>

配置多个数据源datasource的更多相关文章

  1. iOS基础 - UITableView的数据源(dataSource)和代理(delegate)

    UITableView的数据源(dataSource)和代理(delegate) UITableView需要一个数据源(dataSource)来显示数据,UITableView会向数据源查询一共有多少 ...

  2. 用JAVA代码获取Weblogic配置的JNDI 数据源连接

    第一步:生成与JDK版本对应的weblogicjar,利用cmd 进入到weblogic_home 路径下进入到server/lib目录,然后运行  JDK  1.6 命令 "java -j ...

  3. SpringMVC+Mybatis 如何配置多个数据源并切换？

    最近公司一个项目需要连接两个数据库(A和B)操作,有的模块查询A库,有的模块查询B库,因此需要改造下,项目后台用的是SpringMVC+Mybatis+MySQL架构,折腾了两天后终于搞定了,在这里记 ...

  4. SpringBoot入门之基于Druid配置Mybatis多数据源

    上一篇了解了Druid进行配置连接池的监控和慢sql处理,这篇了解下使用基于基于Druid配置Mybatis多数据源.SpringBoot默认配置数据库连接信息时只需设置url等属性信息就可以了,Sp ...

  5. 20. Spring Boot 默认、自定义数据源 、配置多个数据源 jdbcTemplate操作DB

    Spring-Boot-2.0.0-M1版本将默认的数据库连接池从tomcat jdbc pool改为了hikari,这里主要研究下hikari的默认配置 0.  创建Spring Boot项目,选中 ...

  6. 配置多个数据源，spring profile 多环境配置管理

    针对生产环境,测试环境,以及本地调试开发有时会配置多套数据库,在一个数据配置文件进行修改,往往有时发布到生成环境会忘记修改,或者本地调试时还是生产环境的库,会导致生产环境数据被污染. ps--刚开始配 ...

  7. Springbooot +Mybaties 配置数据库多数据源

    前言 在实际项目中,我们可能会碰到在一个项目中会访问多个数据库的情况.针对这种情况,我们就需要配置动态的数据源了.一般按照以下步骤即可 一.在启动类上添加注解 二.在application.prope ...

  8. Spring主从数据库的配置和动态数据源切换原理

    原文:https://www.liaoxuefeng.com/article/00151054582348974482c20f7d8431ead5bc32b30354705000 在大型应用程序中,配 ...

  9. springmvc 配置多个数据源，并动态切换

    前言:工作中经常会有两个数据源的情况,所以记录一下.这里测试两个数据源,给出流程和代码. 首先:配置两个数据源 <description>配置mybatis数据源</descript ...

随机推荐

  1. 在Centos 7.7下用minikube部署单节点kubernetes.

    centos8 下用yum安装docker-ce会报错,说明docker-ce对centos8支持还不太好.所以在centos7.7下安装 先更新一下系统 yum update 安装 yum工具,   ...

  2. IDEA工具java开发之 高级功能分屏是可以多次使用的 日志连接及浏览器 本地修改历 多列操作 查看方法调用情况

    ◆tabs分屏和独立 分屏是可以多次使用的  ◆日志连接及浏览器  ◆本地修改历史  ◆查看方法调用情况 ◆多列操作 可以同时删除也可以同时替换文字 Ctrl + shift + 右,选中一个词

  3. 设计模式课程 设计模式精讲 2-2 UML类图讲解

    1 类图讲解 1 类图讲解 + 公共方法 - private权限 # protected权限 包内和包外继承的子类都能引用 ~ default权限(包权限)只有包内能引用 下划线   静态 Stati ...

  4. No module named 'widgets'

    https://blog.csdn.net/heatdeath/article/details/70313645 适配python3的. https://github.com/twz915/Djang ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：表格单元格使用了 "bg-danger" 类

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. #写一个随机产生138开头手机号的程序 1.输入一个数量，产生xx条手机号 2.产生的这些手机号不能重复

    import randomcount=int(input('请输入你所想要手机号数量:'))prefix='138'for i in range(count): num=random.sample(r ...

  7. IAR STM32F10x_StdPeriph_Driver 3.4转3.6.1库

    1.Fatal Error[Pe1696]: cannot open source file core_cmInstr.h STM32F10x_StdPeriph_Driver 3.4库移植换成3.6 ...

  8. Linux centosVMware shell脚本中的逻辑判断、文件目录属性判断、if特殊用法、case判断

    一.shell脚本中的逻辑判断 格式1:if 条件 ; then 语句; fi 格式2:if 条件; then 语句; else 语句; fi 格式3:if …; then … ;elif …; th ...

  9. Day10 - A - Rescue the Princess ZOJ - 4097

    Princess Cjb is caught by Heltion again! Her knights Little Sub and Little Potato are going to Helti ...

  10. Day4-A-最短路 HDU2544

    在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店到赛场的路线,你可以帮助 ...