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 相关文章推荐
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
JavaScript this关键字的深入详解
Jan 14 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
超级简单的发送邮件程序
2006/10/09 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
js简易版购物车功能
2017/06/17 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
深入解析Python中的urllib2模块
2015/11/13 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python字符串格式化输出方法分析
2016/04/13 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
英语师范专业毕业生自荐信
2013/09/21 职场文书
高一家长会邀请函
2014/01/12 职场文书
企业车辆管理制度
2014/01/24 职场文书
士力架广告词
2014/03/20 职场文书
家长建议怎么写
2014/05/15 职场文书
车辆年检委托书范本
2014/10/14 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
送达通知书
2015/04/25 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS