原料: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. jstack 命令

    NAME jstack - Prints Java thread stack traces for a Java process, core file, or remote debug server. ...

  2. [转帖]Grafana背后的Nginx和Apache Proxy

    Grafana背后的Nginx和Apache Proxy https://ywnz.com/linuxyffq/5590.html 这个网站貌似非常非常好 在本文中,我将向你展示如何在Nginx和Ap ...

  3. Synchronize和ReentrantLock区别

    转自:https://blog.csdn.net/m0_37700275/article/details/83151850 目录介绍1.Synchronize和ReentrantLock区别 1.1 ...

  4. VC++ 窗口透明化及透明窗口上绘画、截图、轨迹

    源文件:https://files.cnblogs.com/files/MrFengD/Temp.rar

  5. appium-Android_webview页面元素定位遇到的问题

    如上图所示,该页面包含webview,但是用driver.contexts只获取到了Android原生,而webview的context则没有获取到,所以webview页面的元素.希望有大佬能提供有效 ...

  6. 模仿ORM

    ORM 对象关系映射 类 ---------->映射--------->    表 对象 ------>映射---------->   一条记录 对象点属性 --->映射 ...

  7. GoJS

    GoJS GoJS示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. Redis 键空间事件通知

    出处: 使用Redis完成定时任务 场景   使用Java做过项目的人大概都用过定时器.一般来说,项目里订单模块和评论模块,都会涉及到定时任务执行.比如说: 用户下订单后,需要在5分钟内完成支付,否则 ...

  9. Centos7.3安装Oracle11.2.0.3

    1.创建用户用户组 [root@smallcloud ~]# groupadd oinstall [root@smallcloud ~]# groupadd dba [root@smallcloud ...

  10. CW2A与CA2W

    字符串的ASCII和UNICODE之间的转换 1)Win32提供了API函数MultiByteToWideChar和WideCharToMultiByte来提供这种功能. 2)ATL还提供了另一套转换 ...