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 Html结构转字符串形式显示代码
Nov 15 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
使用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 park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php注销代码(session注销)
2012/05/31 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Python读取csv文件实例解析
2019/12/30 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
一些Solaris面试题
2013/03/22 面试题
初级Java程序员面试题
2016/03/03 面试题
自主招生自荐信
2013/12/08 职场文书
开展创先争优活动总结
2014/08/28 职场文书
Python中的程序流程控制语句
2022/02/24 Python