方式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. CS231n -Assignments 1 Q1 and Q2

    前言 最近在youtube 上学习CS231n的课程,并尝试完成Assgnments,收获很多,这里记录下过程和结果以及过程中遇到的问题,我并不是只是完成需要补充的代码段,对于自己不熟悉的没用过的库函 ...

  2. 「AMPPZ2014」Petrol

    传送门: 这是一道bzoj权限题 Luogu团队题链接 解题思路 首先对于每一个点 \(x\) 预处理出 \(nr[x]\) 和 \(dis[x]\),分别表示离 \(x\) 最近的加油站以及该段距离 ...

  3. Write-up-NODE-1

    关于 下载地址:点我 哔哩哔哩:哔哩哔哩 一天研究OBS终于不闪屏了 顺便在这里记录一下,上网查了很久.刚刚开始是不闪屏了,但是锁屏后就唤醒不了了,只能强制关机. 然后又上网找了很久,重启了N次,终于 ...

  4. SLT学习——leafes tree扩展 【文艺平衡树】

    这是一个全新的数据结构 md,别看这篇文章了,这篇已经废了. 百折不饶,再交一次,更新复杂度证明 这里是HYF,蒟蒻一只,最近因某些原因开始学数据结构了,然后就写了这篇题解. 下面给大家介绍一个全新的 ...

  5. 吴裕雄--天生自然JAVAIO操作学习笔记：投票程序

    public class ExecDemo{ public static void main(String args[]){ new Operate() ; } }; import java.io.B ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮大小

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

  7. 利用Python进行多项式拟合

    多项式拟合的简单代码: import matplotlib.pyplot as plt import numpy as np x=[,,,,,,,] y=[,,,,,,,] a=np.polyfit( ...

  8. Android_实验小心得_持续补充中......

    1.LineLayout布局控件宽度百分比显示 其中,宽度百分比 = 控件权重 / 所在parent中所有控件权重和 <LinearLayout android:layout_width=&qu ...

  9. Linux CentOS7 VMware正则介绍、grep工具、egrep表达式

    一.正则介绍 正则是学习shell脚本的必学的内容,正则学的好坏直接影响到shell编程能力. 正则表达式:使用单个字符串来描述或匹配一系列符合某个句法规则的字符串.通常用来检索和替换那些符合某个模式 ...

  10. CH15 面向对象程序设计

    面向对象程序设计是基于三个基本概念的:数据抽象.继承和多态. 第7章介绍了数据抽象的知识,简单来说,C++通过定义自己的数据类型来实现数据抽象. 数据抽象是一种依赖于接口和实现分离的编程技术:类的设计 ...