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之软键盘实现(js源码)
Jan 30 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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制作静态网站的模板框架(二)
2006/10/09 PHP
PHP中的session安全吗?
2016/01/22 PHP
jQuery.extend 函数的详细用法
2012/06/27 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python比较两个列表是否相等的方法
2015/07/28 Python
numpy自动生成数组详解
2017/12/15 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python反转列表的三种方式解析
2019/11/08 Python
python 字段拆分详解
2019/12/17 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
求职简历的自我评价
2014/01/31 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
三方股份合作协议书
2014/10/13 职场文书
公司开业致辞
2015/07/29 职场文书
Python基础知识之变量的详解
2021/04/14 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL