jQuery实现获取多选框的值示例


Posted in jQuery onFebruary 07, 2020

本文实例讲述了jQuery实现获取多选框的值。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>3water.com jQuery获取多选框的值</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body>苹果:
    <input type="checkbox" name="id" value="aa">香蕉:
    <input type="checkbox" name="id" value="bb">橘子:
    <input type="checkbox" name="id" value="cc">
    <button id="btn">批量删除</button>
  </body>
  <script>
  $('#btn').click(function () {
    var id=[];
    $("input[name='id']:checked").each(function(){
      id.push($(this).val());
    });
    console.log(id);
  });
  </script>
</html>

运行效果

 jQuery实现获取多选框的值示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery+pjax简单示例汇总
Apr 21 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 #jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
9种方法优化jQuery代码详解
Feb 04 #jQuery
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
Jquery Datatables的使用详解
Jan 30 #jQuery
You might like
使用php显示搜索引擎来的关键词
2014/02/13 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
python实现大转盘抽奖效果
2019/01/22 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
数据库方面面试题
2012/04/22 面试题
市场营销调查计划书
2014/05/02 职场文书
卖车协议书范例
2014/09/16 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
个人借条范本
2015/05/25 职场文书
学生退学证明
2015/06/23 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers