原料：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. Javascript学习笔记三——操作DOM（二）

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  2. （5.14）mysql高可用系列——级联复制与多主一从

    目录: [0]实验需求 级联复制,201为主库,202为从库/同时为203的主库,203为202的从库[1]实验环境 级联:A->B->C 实践思路: (1)直接拿A的xtrabackup ...

  3. linux系统设置允许密码登录

    编辑  /etc/ssh/sshd_config 文件 将PasswordAuthentication 的值改为 yes 然后重启ssh 服务 进入到  /etc/init.d 文件夹内 执行 ./s ...

  4. STL string 常见用法详解

    string 常见用法详解 1. string 的定义 //定义string的方式跟基本数据类型相同,只需要在string后跟上变量名即可 string str; //如果要初始化,可以直接给stri ...

  5. HDU3622 Bomb Game(二分+2-SAT)

    题意 给n对炸弹可以放置的位置(每个位置为一个二维平面上的点), 每次放置炸弹是时只能选择这一对中的其中一个点,每个炸弹爆炸 的范围半径都一样,控制爆炸的半径使得所有的爆炸范围都不相 交(可以相切), ...

  6. mysql 8.x 集群出现：Last_IO_Error: error connecting to master 'repl@xxx:3306' - retry-time: 60 retries: 1

    网上的经验:网络不同,账号密码不对,密码太长,密码由 # 字符:检查MASTER_HOST,MASTER_USER,MASTER_PASSWORD(不知道 MASTER_LOG_FILE 有没有影响) ...

  7. 解决sql "Compatibility_199_804_30003" 和 "SQL_Latin1_General_CP1_CI_AS" 之间的排序规则冲突。

    关联条件加  COLLATE Compatibility_199_804_30003

  8. mqtt协议实现 java服务端推送功能（一）安装

    最近有个新需求,需要通过java服务端把信息推送到mqtt服务器上,安卓和ios端从mqtt服务器上获取信息实现推送. 1. 本地需要安装Mosquitto服务器  http://mosquitto. ...

  9. Vue学习笔记（一） 利用idea 搭建 vue 项目

    环境准备工作: 安装node.js 环境  -- 略 安装vue-li  全局安装vue-cli,在命令行中执行npm install -g vue-cli idea准备工作: 安装vue.js Fi ...

  10. golang编写二叉树

    最近开始找golang 开发工程师职位,针对算法相关二叉树相关常用面试题搞一遍: package tree import (     "math"     "fmt&qu ...