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 相关文章推荐
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
vuex vue简单使用知识点总结
Aug 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python各类经纬度转换的实例代码
2019/08/08 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Python如何将装饰器定义为类
2020/07/30 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
租房合同协议书
2014/04/09 职场文书
实习协议书
2015/01/27 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
Python 数据可视化之Seaborn详解
2021/11/02 Python