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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
基于jquery实现五星好评
Nov 18 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
javascript实现yield的方法
2013/11/06 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
老生常谈js数据类型
2017/08/03 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Python常见内置高效率函数用法示例
2018/07/31 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Django单元测试工具test client使用详解
2019/08/02 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python sorted函数原理解析及练习
2020/02/10 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Python下载的11种姿势(小结)
2020/11/18 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
会计工作检讨书
2015/02/19 职场文书
2015迎新晚会开场白
2015/05/29 职场文书