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检查日期格式的函数[比较全]
Oct 17 Javascript
jQuery 创建Dom元素
May 07 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
vue 实现element-ui中的加载中状态
Nov 11 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
原生js实现无缝轮播图效果
Jan 28 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
第九节--绑定
2006/11/16 PHP
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python基于numpy模块实现回归预测
2020/05/14 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
儿媳婚宴答谢词
2014/01/14 职场文书
房屋委托书范本
2014/04/04 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
史上最牛辞职信
2015/05/13 职场文书
新生儿未入户证明
2015/06/23 职场文书
运动员入场词
2015/07/18 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS