jQuery 获取多选框的值及多选框中文的函数


Posted in Javascript onMay 16, 2016

 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 获取多选框的值及多选框中文的函数的相关知识,希望能够帮助到大家。

Javascript 相关文章推荐
js的写法基础分析
Jan 17 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
js css自定义分页效果
Feb 24 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
jQuery插件制作的实例教程
May 16 #Javascript
总结jQuery插件开发中的一些要点
May 16 #Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 #Javascript
动态的9*9乘法表效果的实现代码
May 16 #Javascript
Svg.js实例教程及使用手册详解(一)
May 16 #Javascript
限制只能输入数字的实现代码
May 16 #Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 #Javascript
You might like
改进的IP计数器
2006/10/09 PHP
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
js 操作符实例代码
2009/10/24 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python定时器线程池原理详解
2020/02/26 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
大门门卫岗位职责
2013/11/30 职场文书
如何写好建议书
2014/03/13 职场文书
公司收款委托书范本
2014/09/20 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
为自己工作观后感
2015/06/11 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android