方式1 ：checkbox

先看效果

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script>
  8. function getSelected(){
  9.     let arr = [];
  10.     $("input[id^='check']:checked").each(function () {
  11.          arr.push($(this).val());
  12.     });
  13.     document.getElementById("demo").innerHTML='你选中了：'+arr.join(',');
  14. }
  15. </script>
  16. </head>
  17. <body>
  18.  
  19. <form>
  20. <input type="checkbox" id="check1" value='1'>level 1
  21. <input type="checkbox" id="check2" value='2'>level 2
  22. <input type="checkbox" id="check3" value='3'>level 3
  23. <input type="checkbox" id="check4" value='4'>level 4
  24. </form>
  25.  
  26. <br/><br/>
  27. <button onclick="getSelected()">统计选中</button>
  28. <p id="demo"></p>
  29.  
  30. </body>
  31. </html>

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

 方式2 ：button

先看效果，颜值更高

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script>
  8. $(document).ready(function(){
  9.     $('button').click(function(){
  10.         //每次点击的时候，切换当前的元素样式
  11.          $(this).toggleClass('active');
  12.     });
  13. });
  14. function myFunction(){
  15.     var levelArr=[];
  16.     $('button.level.active').each(function () {
  17.         levelArr.push($(this).val());
  18.     });
  19.     $("#demo").text('选中了：'+levelArr.join(','));
  20. }
  21. </script>
  22. <style type="text/css">
  23.  
  24. /* 样式默认为绿色 */
  25. button.level {
  26. outline: none;
  27. border: 1px solid #00850B;
  28. border-radius: 4px;
  29. background: #FFFFFF;
  30. font-family: PingFangSC-Medium;
  31. font-size: 14px;
  32. color: #00850B;
  33. text-align: center;
  34. line-height: 18px;
  35. }
  36.  
  37. /* 选中后样式 */
  38. button.green.active{
  39.    color: #FFFFFF;
  40.    background:#00850B;
  41. }
  42.  
  43. /* 覆盖默认样式 */
  44. button.blue {
  45. border: 1px solid #1273C7;
  46. background: #FFFFFF;
  47. color: #1273C7;
  48. }
  49.  
  50. button.blue.active{
  51.    color: #FFFFFF;
  52.    background:#1273C7;
  53. }
  54.  
  55. button.yellow {
  56. border: 1px solid #E3AD2F;
  57. background: #FFFFFF;
  58. color: #E3AD2F;
  59. }
  60.  
  61. button.yellow.active{
  62.    color: #FFFFFF;
  63.    background:#E3AD2F;
  64. }
  65.  
  66. button.red {
  67. border: 1px solid #D60505;
  68. background: #FFFFFF;
  69. color: #D60505;
  70. }
  71.  
  72. button.red.active{
  73.    color: #FFFFFF;
  74.    background:#D60505;
  75. }
  76.  
  77. </style>
  78. </head>
  79. <body>
  80.  
  81. <button class="level green" value='1'>level 1</button>
  82. <button class="level blue" value='2'>level 2</button>
  83. <button class="level yellow" value='3'>level 3</button>
  84. <button class="level red" value='4'>level 4</button>
  85.  
  86. <br/><br/>
  87. <button type="button" onclick="myFunction()">统计选中</button>
  88. <p id="demo"></p>
  89. </body>
  90. </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. （转）jquery.validate插件的使用

    JQuery Validate使用总结:一.导入js库<script src="../js/jquery.js" type="text/javascript&quo ...

  2. leetcode424 Longest Repeating Character Replacement

    """ Given a string s that consists of only uppercase English letters, you can perform ...

  3. idea配置使用

    1.下载时注意连带下载git 2.实时清除内存 打开 show memory indicator 3.插件安装  前端常用插件(vue,element,css,html,node,ts等)找到适合自己 ...

  4. Vue下URL地址栏参数改变却不能刷新界面

    在完成毕业设计(基于Vue的信息资讯展示与管理平台)的过程中,处理如下图所示的 点击左侧栏目列表跳转到对应文章列表 的问题时,初次点击可以跳转到对应的页面,但是当第二次点击时,虽然地址栏的参数改变了, ...

  5. C# Stream篇（—） -- Stream基类

    写在前头: Stream系列文章共收录7篇,本着备忘和归纳的目的本着备忘和归纳的目的,全部收录于本分类中. 下面是有原文连接,望各位看官还是到原作者处学习,毕竟CV过来的文字难免有走样之处. 原始连接 ...

  6. AngularJS 官方启动文档

    参考:https://angular.io/guide/quickstart 中文:http://www.angularjs.net.cn/

  7. 第1节 kafka消息队列：3、4、kafka的安装以及命令行的管理使用

    6.kafka的安装 5.1三台机器安装zookeeper 注意:安装zookeeper之前一定要确保三台机器时钟同步 */1 * * * * /usr/sbin/ntpdate us.pool.nt ...

  8. Caused by: java.net.ConnectException: Connection timed out: connect

    发生这种情况的原因是:连接的路径发生错误

  9. PHP 获取header 的自定义参数值

    $.ajax({ type: "GET", url: "default.aspx", beforeSend: function(request) { reque ...

  10. 分页--pagination.js

    var pagination = function (thispage, totalpage, ulele, firstlast) { ulele.html(''); var prevCss, nex ...