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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
angular简介和其特点介绍
Jan 29 Javascript
完善的jquery处理机制
Feb 21 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
基于iview的router常用控制方式
May 30 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
php查看当前Session的ID实例
2015/03/16 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python3判断url链接是否为404的方法
2018/08/10 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python自定义时钟类、定时任务类
2021/02/22 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
python中random模块详解
2021/03/01 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
公司户外活动总结
2014/07/04 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书