jQuery 获取多选框的值及多选框中文的函数
更新时间：2016年05月16日 17:01:05 作者：FungLeo
这篇文章主要介绍了jQuery 获取多选框的值及多选框中文的函数的相关资料,需要的朋友可以参考下
DOM结构
我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述.
<label class="input_checkbox"> <input type="checkbox" name="sell_area" vlaue="0"> <span>甘肃</span> </label> <label class="input_checkbox"> <input type="checkbox" name="sell_area" vlaue="1"> <span>青海</span> </label> <label class="input_checkbox"> <input type="checkbox" name="sell_area" vlaue="2"> <span>陕西</span> </label> <label class="input_checkbox"> <input type="checkbox" name="sell_area" vlaue="3"> <span>宁夏</span> </label>
使用这种方法的优点是,点击文字就可以选择多选框了.并且可以使用CSS来美化整个样式.
JS代码
返回已经选中的多选框的值函数
function returnCheckboxVal(name){
var data="";
$('input:checkbox[name="'+name+'"]:checked').each(function(){
data += $(this).attr("vlaue")+",";
});
return data.substring(0,data.length-1);
}
通过这个函数,可以按照我们的需要,返回相应name值的多选框选中的项目的值,以1,2,3的方式返回
好,这里需要解释一下了,为什么我使用$(this).attr("vlaue")这种方式来获取.
其实我从搜索引擎找到的是 $(this).val() 的方式获取的.但是我很奇怪,我返回的值全部是on.
可能和我使用的是 jquery2.0的版本有关系,但具体是什么原因,我没有深究.
返回已经选中的多选框的项目名称
如上,可能我需要返回的是甘肃,青海,陕西,宁夏这样的项目名.当然,这个也是可以做到的.
不过,这个严重依赖我上面的DOM结构,如果结构不相同的话,需要做适当的修改的.
function returnCheckboxItem(name){
var data="";
$('input:checkbox[name="'+name+'"]:checked').each(function(){
data += $(this).siblings('span').html()+",";
});
return data.substring(0,data.length-1);
}
总结
网上搜索来的代码不一定都是正确的.但大体思路应该不会错.
其中的差异可能是标点符号(中英文)\缩进(中文全角空格)\或者是使用的JQ版本不相同.
所以找到的代码不能使用的时候,仔细排查一下,或许用更原始的方法可能会解决问题.
以上所述是小编给大家介绍的jQuery 获取多选框的值及多选框中文的函数的相关知识，希望能够帮助到大家。
相关文章
这篇文章主要介绍了jQuery中内容过滤器简单用法,结合实例形式分析了jQuery中内容过滤器的相关概念、功能、应用场景及相关使用方法,需要的朋友可以参考下2018-03-03
jQuery选中select控件 无法设置selected的解决方法
select 控件的 option用jQuery动态添加，然后选中某项时，IE6不能执行（火狐没问题），用try{}catch(err){alert(err.description);}提示为“无法设置selected属性 未指明的错误”2010-09-09
jQuery UI 实例讲解 - 日期选择器(Datepicker)
下面小编就为大家带来一篇jQuery UI 实例讲解 - 日期选择器(Datepicker)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
jquery创建一个新的节点对象(自定义结构/内容)的好方法
jq创建一个新的节点对象,这对一些自定义功能很有帮助，而且可以随意控制对象的结构与内容，何乐而不为呢，看到这里，相信有些朋友已经按耐不住了，好记下来为大家介绍实现方法，感兴趣的朋友可以了解下哦2013-01-01
在一些购物网站经常会遇到倒计时的功能，例如某些商品在一定期限内搞活动，下面小编给大家分享一段代码关于jquery实现的判断倒计时是否结束代码，希望对大家有所帮助2016-02-02
只要能够不停地把第一个item移动到末尾，其余的自会往上填补空缺，填补的过程用动画放慢些，就能有不断滚动的视觉效果了，这种效果基于jquery怎么实现呢？下面小编给大家带来了jQuery列表循环滚动效果的实现思路代码，一起看看吧2021-08-08
jQuery页面元素动态添加后绑定事件丢失方法,非 live
这篇文章主要介绍了jQuery页面元素动态添加后绑定事件丢失方法,非 live 的相关资料,非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
本篇文章主要介绍了jquery网页加载进度条的实现 ，在页面加载的时候，上方红色的进度条，有兴趣的可以了解一下2017-06-06
在本篇文章中我们整理了关于学习jQuery中的noConflict()用法的相关知识点内容，有需要的朋友们可以学习下。2018-09-09
支持查询功能的键盘和简单得软键盘，键盘样式完全在独立的css文件中定义，可以自行美化2012-07-07
最新评论