原料：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. MySQL_数据查询

    目录 1.查看数据的两种方法 2.查看数据并进行筛选(where) 3.不查看重复记录(distinct),空值,非空值 5.查看指定行(limit) 6.模式匹配(like) regexp 6.范围 ...

  2. python 爬虫 基于requests模块发起ajax的post请求

    基于requests模块发起ajax的post请求 需求:爬取肯德基餐厅查询http://www.kfc.com.cn/kfccda/index.aspx中指定某个城市地点的餐厅数据 点击肯德基餐厅查 ...

  3. [bzoj3043]IncDec Sequence_差分

    IncDec Sequence 题目大意:给定一个长度为n的数列{a1,a2...an},每次可以选择一个区间[l,r],使这个区间内的数都加一或者都减一.问至少需要多少次操作才能使数列中的所有数都一 ...

  4. Apollo分布式部署总结

    环境 操作系统为centOS7 Apollo服务端为Java版本为1.8 MySQL5.8.x 环境DEV 注意事项 按文档安装config与admin的数据库,并修改相关配置 在修改Apollo P ...

  5. [转帖]服务器备份工具:Amanda,Bakula,Clonezilla,Rsnapshot,Mondo Rescue

    服务器备份工具:Amanda,Bakula,Clonezilla,Rsnapshot,Mondo Rescue https://ywnz.com/linuxyffq/5270.html 改天试用一下. ...

  6. GIP画图

    世界坐标:相对于winform窗体来说的, 页面坐标:相对于控件的 设置坐标:相对于显示器 获得Graphics对象一般有两种方式: 1.控件.CreateGraphics();//通过该方式创建后要 ...

  7. centos 秘钥登录

    客户端系统:macOS 服务端系统:Centos7 另外:ip 为 172.25.11.182 用户名为 iamfine 1, 在客户端macOS上生成 rsa 对 ssh-keygen -t rsa ...

  8. Hinton等人最新研究：大幅提升模型准确率，标签平滑技术到底怎么用?

    Hinton等人最新研究:大幅提升模型准确率,标签平滑技术到底怎么用? 2019年07月06日 19:30:55 AI科技大本营 阅读数 675   版权声明:本文为博主原创文章,遵循CC 4.0 B ...

  9. lua加载DLL

    .cpp //若没有在项目属性--库文件.依赖文件.包含添加.则添加一下路径 #pragma  comment (lib,"lua5.1.lib") #include " ...

  10. 用eclipse启动tomcat时报Could not publish server configuration for Tomcat v8.0 Server at localhost..错误

    网上的解决方法是: 1.如果是使用的eclipse tomcat 插件,需要在你的工作空间 找到如下文件:.metadata.plugins\org.eclipse.wst.server.cor\e\ ...