原料：jquery

直接上代码

html代码

<html>

  <head>

    <title>$Title$</title>

  </head>

  <body>

      <input type="checkbox" value="男">男<br/>

      <input type="checkbox" value="女">女<br/>

    <input type="checkbox" value="男1">男1<br/>

    <input type="checkbox" value="女2">女2<br/>

    <input type="checkbox" value="男3">男3<br/>

    <input type="checkbox" value="女4">女4<br/>

    <input type="button" id="btn" value="btn">

    <script src="/assets/js/jquery1.12.4.js"></script>

  </body>

</html>

　script代码

  <script>

      $("#btn").click(function () {

          var re = [];

          $("body").find("input[type='checkbox']:checked").each(function() {re.push($(this).val());

        })

          console.log(re.join("/"));

      });

   ;

  </script>

　　实例：

结果：

另一种写法（编译器编辑 语法可能会变成红色的，不影响使用）

　　原料：css3的选择器

html代码

<html>

  <head>

    <title>$Title$</title>

  </head>

  <body>

      <input type="checkbox" value="男">男<br/>

      <input type="checkbox" value="女">女<br/>

    <input type="checkbox" value="男1">男1<br/>

    <input type="checkbox" value="女2">女2<br/>

    <input type="checkbox" value="男3">男3<br/>

    <input type="checkbox" value="女4">女4<br/>

      <input type="button"  onclick="box()" value="btn1" />

  <script>

    function box() {

        var res = [];

        document.querySelectorAll("body input:checked").forEach((e)=>{

            if(e.checked){

                res.push(e.value);

            }

        });

        console.log(res.join("/"));

    }

  </script>

  </body>

</html>

　　结果：

　

快速取出选中checkbox的值的更多相关文章

  1. js实现获取选中checkbox的值

    var bookVersionId = []; var examVirtualSetResultId; $.each($('input[type=checkbox]:checked'),functio ...

  2. Jquery常用radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置

    获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...

  3. easyui 》 radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中

    获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...

  4. checkbox 选中、取值处理

    [1].[代码] checkbox 选中.取值处理 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  5. jquery radio取值，checkbox取值，select取值及选中

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('in ...

  6. 设置checkbox选中，设置radio选中，根据值设置checkbox选中，checkbox勾选

    设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选 >>>>>>>>>>>>&g ...

  7. JavaScript- 获得TreeView CheckBox里选中项的值

    获得TreeView CheckBox里选中项的值,对JSDOM控制还不是很熟,感觉不太容易.试了很多次终于成功了. 代码如下 <body> <form id="form1 ...

  8. 解决easyui datagrid加载数据时，checkbox列没有根据checkbox的值来确定是否选中

    背景:   昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...

  9. jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...

随机推荐

  1. BTree B+Tree

    简介 B 树是为了磁盘或其它存储设备而设计的一种多叉平衡查找树.(相对于二叉,B树每个内结点有多个分支,即多叉)B树又可以写成B-树/B-Tree,并不是B“减”树,横杠为连接符,容易被误导首先我们介 ...

  2. 结构体structure

    结构体是值类型 import Foundation struct TV{ var keyName="a" var keyNumber=9 func getKey()->Int ...

  3. STL map 常见用法详解

    <算法笔记>学习笔记 map 常见用法详解 map翻译为映射,也是常用的STL容器 map可以将任何基本类型(包括STL容器)映射到任何基本类型(包括STL容器) 1. map 的定义 / ...

  4. MySQL如何利用索引优化ORDER BY排序语

    MySQL索引通常是被用于提高WHERE条件的数据行匹配或者执行联结操作时匹配其它表的数据行的搜索速度. MySQL也能利用索引来快速地执行ORDER BY和GROUP BY语句的排序和分组操作. 通 ...

  5. django 模块查询

    # 查询轮播图slider_list = Slider.objects.filter(type = constants.SLIDER_TYPE_INDEX) # 查询新闻now_time = date ...

  6. Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07

    目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...

  7. 深入理解Redux之手写React-Redux

    React-Redux主要由两部分组成,一是Provider(提供者),顾名思义作用就是提供状态数据. 另一部分是connect函数,它的作用是把UI组件和状态数据“连接”起来,实现了Model和Vi ...

  8. SSM（Spring+SpringMVC+MyBatis）高并发优化思路

    SSM(Spring+SpringMVC+MyBatis)框架集由Spring.MyBatis两个开源框架整合而成(SpringMVC是Spring中的部分内容).常作为数据源较简单的web项目的框架 ...

  9. webpack自定义loader并发布

    一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...

  10. vue和react区别

    vue和react区别