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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery实现的放大镜效果示例
Feb 24 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
Python处理JSON数据并生成条形图
2016/08/05 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
洗车工岗位职责
2014/03/15 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
慈善晚会策划方案
2014/05/14 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript