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编程起步(第四课)
Feb 27 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
javascript定义函数的方法
Dec 06 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
js实现简单掷骰子小游戏
Oct 24 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 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python原始套接字编程示例分享
2014/02/21 Python
解析Python中的二进制位运算符
2015/05/13 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python字典对象实现原理详解
2019/07/01 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Python学习笔记之装饰器
2020/08/06 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
家长会主持词开场白
2014/03/18 职场文书
关于保护环境的标语
2014/06/09 职场文书
护理专科学生自荐书
2014/07/05 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
三人合伙协议书范本
2014/10/29 职场文书