jQuery将所有被选中的checkbox某个属性值连接成字符

2015-11-13 admin

本文实例讲述了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); }); });

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-280.html

文章标题:jQuery将所有被选中的checkbox某个属性值连接成字符

相关文章
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
首先给大家展示下效果图: html代码部分: 代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Transitional&#x2F...
2017-03-30
时钟Jquery+html5特效代码分享(可设置闹钟并且语音提醒)
本文实例讲述了Jquery+html5可设置闹钟并且会语音提醒的时钟特效。分享给大家供大家参考。具体如下: 这是一款基于Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码,超逼真的模拟时钟,最大的特点还可以语音提醒,感兴趣的...
2017-03-31
jQuery实现的类似淘宝网站搜索框样式代码分享
运行效果图: 为大家分享的类似淘宝网站搜索框样式代码如下 &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text&#x2F;html; ...
2017-03-29
大神如何学习:jQuery 之父,坚持每天进行编码
去年秋天我的业余编程项目(coding side projects)到了一个紧要关头:没有充足的进度,也不能够找到一种方法在既不牺牲我可汗学院(Khan Academy)高效的工作的前提下完成更多的事情。 如何处理我的业余编程项目是有一些严...
2015-11-12
JavaScript教程之jQuery实现禁用鼠标右键
$(function(){ $(document).bind(&quot;contextmenu&quot;,function(e){ return false; }); }) ...
2015-11-12
基于jquery实现导航菜单高亮显示(两种方法)
项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式。 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如...
2017-03-29
基于jQuery实现仿百度首页换肤背景图片切换代码
不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦~ html代码: &lt;a href=&quot;#&quot;&gt;换肤&lt;&#x2F;a&gt; &lt;div class=&quo...
2017-03-30
jQuery合作伙伴左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考。具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止自动滚动,鼠标离开自动滚动,点击左右按钮...
2017-03-31
jquery中的ajax如何工作
通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $(&quot;#b01&quot;).click(function(){ htmlobj=$.ajax({url:&quot...
2015-11-12
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果…总之你想到的效果它都做到了,它的名字叫Sl...
2017-03-24
回到顶部