方式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. Centos7 忘记密码解决方法

    一.Centos7 忘记密码解决方法 1.进入单用户模型 重启 Linux 系统主机并出现引导界面时,按下键盘上的 e 键进入内核编辑界面 然后按向下键,找到以“Linux16”开头的行,在该行的最后 ...

  2. uniGUI页面标题和页面背景的更改(03)

    ---------------------------------------------------------------------------------------------------- ...

  3. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

  4. Numpy 为运算

    Numpy “bitwise_” 开头的函数是位运算函数: Numpy 位运算包括以下几个函数: 函数 描述  bitwise_and  对数组元素执行位与操作  bitwise_or 对数组元素执行 ...

  5. 五、java基础-关键字this_static_super_abstract_final，finalize()方法finally语句块

    1.关键字this 含义:this 是一个引用类型,代表当前对象,引用类型里面必然保存内存地址,在堆中的每个对象中存储,保存内存地址指向自身. 用法: 1)this可以用在成员方法中,里面保存内存地址 ...

  6. VS 右键属性闪一下啥也打不开问题

    unity项目,从vs项目右键属性闪一下啥也打不开的问题这个是因为工程是unity管理的,里面有个插件默认设定不可查看修改属性修改:vs中打开“工程”->"选项"中(修改后这 ...

  7. texlive 安装

    texlive 可以从下面两个网址下载 https://mirrors.tuna.tsinghua.edu.cn/CTAN/systems/texlive/Images/ https://mirror ...

  8. NO30 磁盘分区--Raid--ext2文件系统

    Raid: ext2文件系统:

  9. Linux 内核 编译模块

    背景: 由于调试内核或者由于分区大小限制,有时候内核组件不一定完全需要编进内核中. 所以,在开发中经常将内核组件编译成为模块,等到在恰当的时机加载. 概览: Linux内核模块的编译方法有两种: 1. ...

  10. memset函数总结

    之前有一个程序栽在了memset函数上面,对memset函数一直耿耿于怀,于是想总结一下这个常用但是总出错的函数. memset在string.h文件中是这么定义的: void*代表这个函数的返回值可 ...