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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现电梯导航模块
Dec 22 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
javascript this详细介绍
2016/09/19 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
什么是命名空间(NameSpace)
2015/11/24 面试题
大学四年个人的自我评价
2014/02/26 职场文书
廉洁使者实施方案
2014/03/29 职场文书
实习生评语
2014/04/26 职场文书
城市创卫标语
2014/06/17 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
人事代理委托书
2014/09/27 职场文书
企业年检委托书范本
2014/10/14 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
酒店宣传语大全
2015/07/13 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
售房协议书范本
2015/08/11 职场文书
防溺水主题班会教案
2015/08/12 职场文书
教师旷工检讨书
2015/08/15 职场文书
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技