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绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 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
2006/12/14 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
php use和include区别总结
2019/10/13 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python3基础之list列表实例解析
2014/08/13 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python3调用R的示例代码
2018/02/23 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
python中调试或排错的五种方法示例
2019/09/12 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
营销部内勤岗位职责
2014/04/30 职场文书
物理学专业求职信
2014/07/04 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
事业单位聘任报告
2015/03/02 职场文书
生日寿星公答谢词
2015/09/29 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android