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中的作用域
Apr 07 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
深入理解js promise chain
May 05 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 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 DataGrid 实现代码
2009/08/12 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python实现单词翻译功能
2017/06/06 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
python能开发游戏吗
2020/06/11 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
保险经纪人求职信
2014/03/11 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
小学英语教学反思范文
2016/02/15 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
SQL注入详解及防范方法
2021/12/06 MySQL
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python