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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
ECMAscript 变量作用域总结概括
Aug 18 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python删除过期文件的方法
2015/05/29 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
学校学期工作总结
2015/08/13 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
解决numpy和torch数据类型转化的问题
2021/05/23 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android