原料：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. 设置gridView 行号 行号宽

    gridView1.IndicatorWidth=30; //设置行号宽度 //对gridView1的CustomDrawRowIndicator事件进行操作 进行行号显示 private stati ...

  2. js报Uncaught SyntaxError: Unexpected token <错误 解决方法

    js报Uncaught SyntaxError: Unexpected token <错误 解决方法 错因 js被shiro的拦截器拦下,访问不了 #shiro的配置 shiro: hash-a ...

  3. mybatis 基础(一) xml配置

    如果文章有误,请各位楼下评论,感谢各位积极修正! 一起学习,成为大佬! mybatis: 1.轻量级 2.高级映射(实体类与数据库表字段的映射) 这样就可以后续开发中去操作实体类而不需要去关注数据库, ...

  4. matplotlib库的基本使用与折线图

    matplotlib:最流行的Python底层绘图库,主要做数据可视化图表,名字取材于MATLAB,模仿MATLAB构建 基本使用: x和y的长度必须一致 figure()方法用来设置图片大小 x,y ...

  5. PBOC第八部分和第十一部分关于TYPEA总结（二）——传输协议（ISO14443－4）

    二.传输协议(ISO14443-4)(8,P50 11,P30) 1.选择应答请求(RATS) 使用RATS命令和PICC协商通讯的最大帧长度(FSD和FSC).帧等待时间(FWT)和启动帧保护时间( ...

  6. Pycharm有必要改的几个默认设置项以及快捷键

    最近在用Pycharm学习Python的时候,总有两个地方感觉不是很舒服,比如调用方法的时候区分大小写(thread就不会出现Thread,string就不会出现String)等,这让我稍稍有点不舒服 ...

  7. winfrom 界面时间动态加载

    Timer time1 = new Timer(); private void time1_Tick(object sender, EventArgs e) { lTime.Text = DateTi ...

  8. shiro学习（四、shiro集成spring+springmvc）

    依赖:spring-context,spring-MVC,shiro-core,shiro-spring,shiro-web 实话实说:web.xml,spring,springmvc配置文件好难 大 ...

  9. opencv3.3 CUDA 初学实例

    //swap.cu #include "cuda_runtime.h" #include "device_launch_parameters.h" #inclu ...

  10. opencv 模板匹配， 已解决模板过大程序不工作的bug

    #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv ...