jQuery将所有被选中的checkbox某个属性值连接成字符串的方法


Posted in Javascript onJanuary 24, 2015

本文实例讲述了jQuery将所有被选中的checkbox某个属性值连接成字符串的方法。分享给大家供大家参考。具体如下:

需求:

对于一组checkbox,当点击每个checkbox后,把当前处于选中状态的checkbox的某个属性值取出来连接成字符串,并以逗号分开。

实现方法:

html部分:

<input type="checkbox" id="1"/>

<label for="1">选项一</label>

<br/>

<input type="checkbox" id="2"/>

<label for="2">选项二</label>

<br />

<input type="checkbox" id="3"/>

<label for="3">选项三</label>

<br/>

<span id="result"></span>

jQuery部分,给每个checkbox定义点击事件,遍历所有选中的checkbox。

$(function() {

    $("input[type=checkbox]").on("click", function () {

 var vIds = "";

 $("input:checked").each(function() {

     vIds += $(this).attr('id') + ",";

 });

 if (vIds.length > 0) {

     vIds = vIds.substring(0, vIds.length - 1);

 }

 $('#result').text(vIds);

    });

});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 #Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 #Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
jQuery选择器querySelector的使用指南
Jan 23 #Javascript
You might like
根据中文裁减字符串函数的php代码
2013/12/03 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
jquery 使用简明教程
2014/03/05 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
Python的randrange()方法使用教程
2015/05/15 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
Java基础面试题
2012/11/02 面试题
市场安全管理制度
2014/01/26 职场文书
环保建议书200字
2014/05/14 职场文书
个人校本研修方案
2014/05/26 职场文书
休学证明范本
2015/06/19 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP