方式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. C. Maximum Median 二分

    C. Maximum Median 题意: 给定一个数组,可每次可以选择一个数加1,共执行k次,问执行k次操作之后这个数组的中位数最大是多少? 题解:首先对n个数进行排序,我们只对大于中位数a[n/2 ...

  2. 第1节 kafka消息队列：1、kafka基本介绍以及与传统消息队列的对比

    1. Kafka介绍 l  Apache Kafka是一个开源消息系统,由Scala写成.是由Apache软件基金会开发的一个开源消息系统项目. l  Kafka最初是由LinkedIn开发,并于20 ...

  3. PHP 符号大全

    注解符号: // 单行注解 /*      */    多行注解 引号的使用 ’   ’ 单引号,没有任何意义,不经任何处理直接拿过来; " "双引号,PHP动态处理然后输出,一般 ...

  4. 导弹拦截p1020(LIS问题)

    题目描述(题目链接:https://www.luogu.org/problem/P1020) 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够 ...

  5. Day2-J-逃离迷宫-HDU-1728

    给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地方是空地,gloria可以穿越,有些地方是障碍,她必须绕行,从迷宫的一个位 ...

  6. 087、Java数组之对象数组的静态初始化

    01.代码如下: package TIANPAN; class Book { private String title; private double price; public Book(Strin ...

  7. 必应壁纸php获取接口

    <?php if($_GET['idx']==null){ $str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?idx= ...

  8. SSH框架系列：Spring配置多个数据源

    分类: [java]2013-12-09 16:59 1247人阅读 评论(0) 收藏 举报 1.问题的引入 对于普通的SSH框架而言,一般配置一个数据源,一个SessionFactory,一个事务管 ...

  9. C语言常用函数

    一.数学函数 调用数学函数时,要求在源文件中包下以下命令行: #include <math.h> 函数原型说明 功能 返回值 说明 int abs( int x) 求整数x的绝对值 计算结 ...

  10. PE文件结构体-IMAGE_OPTIONAL_HEADER

    typedef struct _IMAGE_OPTIONAL_HEADER { // // Standard fields. // WORD Magic; // 标志字, ROM 映像(0107h), ...