jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
更新时间：2015年01月24日 10:24:39 投稿：shichen2014
这篇文章主要介绍了jQuery将所有被选中的checkbox某个属性值连接成字符串的方法,可实现将选中属性值连接成字符串的功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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>
<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);
});
});
$("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程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery实现动态添加tr到table的方法,涉及jQuery针对table表格元素的动态操作相关技巧,需要的朋友可以参考下2016-12-12
用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。2010-01-01
动态加载select下拉框的实现方法有很多，在接下来的文章中为大家介绍下jquery是如何实现的2013-12-12
这篇文章主要介绍了jQuery实现的图文高亮滚动切换特效,涉及jquery基于鼠标事件针对页面元素遍历与动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
jQuery获取Radio,CheckBox选择的Value值(示例代码)
这篇文章主要是对jQuery获取Radio,CheckBox选择的Value值进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
在做web前端开发的时候经常遇到图片滑动切换特效，接下来通过本文给大家分享使用jQuery实现鼠标点击左右按钮滑动切换特效，感兴趣的朋友参考实现代码2017-08-08
jQuery 在光标定位的地方插入文字的插件的实现代码，通过获取光标位置，然后插入文字2012-05-05
jQuery ajaxSubmit 实现ajax提交表单局部刷新
这篇文章主要介绍了jQuery ajaxSubmit 实现ajax提交表单局部刷新 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
Jquery uploadify 多余的Get请求(404错误)的解决方法
下面小编就为大家带来一篇Jquery uploadify 多余的Get请求(404错误)的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
jQuery使用empty()方法删除元素及其所有子元素的方法
这篇文章主要介绍了jQuery使用empty()方法删除元素及其所有子元素的方法,涉及jQuery操作元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
最新评论