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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
微信开发 微信授权详解
Oct 21 Javascript
canvas绘制的直线动画
Jan 23 Javascript
简述vue状态管理模式之vuex
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
咖啡与水的关系
2021/03/03 冲泡冲煮
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python获取一组汉字拼音首字母的方法
2015/07/01 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
利用python 读写csv文件
2020/09/10 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
厉行勤俭节约倡议书
2014/05/16 职场文书
村道德模范事迹材料
2014/08/28 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书