方式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. ubuntu14 安装git

    1.安装git Step1 测试git是否安装,终端输入 $ git 没有安装时,不会识别git命令:

  2. vh搭配vw进行响应式布局

    1.浏览器兼容性: IE8-不支持,IOS7.1-不支持,android4.3-不支持 2. vh代表浏览器视口高度(100vh等于当前浏览器的整个高度) 3.vw代表浏览器视口的宽度 (100vw等 ...

  3. 思科 ASA 系列防火墙 官方文档下载指南

    思科 ASA 系列命令参考 思科 ASA 系列命令参考,A 至 H 命令 思科 ASA 系列命令参考, I 至 R 命令 思科 ASA 系列命令参考,S 命令 思科 ASA 系列命令参考, ASASM ...

  4. 八 SpringMVC文件上传，必须设置表单提交为post

    1 修改Tomcat配置,本地目录映射 那么在server.xml中体现为: 测试一下是否设置成功: 2 引入jia包   3 配置多媒体解析器 3 jsp开启图片上传 4 Controller层设置 ...

  5. Django的templates（模板）

    目录 Django的templates(模板) 模板传值 模板过滤器 模板语法之标签 常用标签之for标签 常用标签之if标签 常用标签之with标签 自定义过滤器和标签 模板的继承和导入 模板的导入 ...

  6. mathematica练习程序（第一章 Mathematica的基本量）

    虽然过去有用Mathematica解过一些问题,不过对这个语言并没有系统学习过. 所以最近想重新把Mathematica系统的学一遍. 偶然在B站上找到了这样一组教程:https://www.bili ...

  7. Linux centos7日常运维——监控io性能、free内存命令、ps进程命令、查看网络状态、linux下抓包

    一.监控io性能 Linux系统出现了性能问题,一般我们可以通过top.iostat.free.vmstat等命令来查看初步定位问题.其中iostat可以给我们提供丰富的IO状态数据. iostat ...

  8. spyder崩溃修复

    实验室突然断电,重启电脑后spyder崩溃 在anaconda命令行中输入命令失败 StackOverflow上找的解决方案,适合win10系统,简单粗暴 在win10搜索里面找,点一下就自动修复了

  9. Content Provider基础

    1.Content Provider为存储和获取数据提供了统一的接口. 2.Content Provider可以在不同的应用程序之间共享数据. 3.Android为常见的一些数据提供了ContentP ...

  10. 继OpenJDK 之后，OpenJFX也将迁移到 Git

    导读 近日 OpenJFX 项目负责人 Kevin Rushforth 提交了一份将 OpenJFX 迁移到 GitHub 的提案. OpenJFX 是 JavaFX 的开源实现.JavaFX 是一个 ...