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单击文字或图片内容放大并居中显示
Jun 23 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php微信开发之图片回复功能
2018/06/14 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python数据结构之图的实现方法
2015/07/08 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python实现定时任务
2017/02/08 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
安全检查验收制度
2014/01/12 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
晚会主持词开场白
2014/03/17 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP