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 写类方式之六
Jul 05 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
Node.js Express安装与使用教程
May 11 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
js的2种继承方式详解
2014/03/04 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
js实现小球在页面规定的区域运动
2020/06/16 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
详细探究Python中的字典容器
2015/04/14 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
浅析Django中关于session的使用
2019/12/30 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
上班玩游戏检讨书
2014/02/07 职场文书
文案策划求职信
2014/03/18 职场文书
食品安全工作方案
2014/05/07 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
物资采购管理制度
2015/08/06 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Python面向对象编程之类的概念
2021/11/01 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
浅谈Node的内存泄露问题
2022/05/06 NodeJs
深入理解pytorch库的dockerfile
2022/06/10 Python