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 相关文章推荐
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
js转义字符介绍
Nov 05 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
JS获取时间的方法
2015/01/21 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Django添加feeds功能的示例
2018/08/07 Python
Python多进程原理与用法分析
2018/08/21 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
火车的故事教学反思
2014/02/11 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
运动会广播稿300字
2015/08/19 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python