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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
js确定对象类型方法
Mar 30 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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数据库开发知多少
2006/10/09 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
详解angular应用容器化部署
2018/08/14 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Python中的descriptor描述器简明使用指南
2016/06/02 Python
flask-restful使用总结
2018/12/04 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python做反被爬保护的方法
2019/07/01 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
python conda操作方法
2019/09/11 Python
PyTorch中permute的用法详解
2019/12/30 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
教室布置标语
2014/06/26 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers