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 相关文章推荐
javascript String 对象
Apr 25 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
javascript生成大小写字母
Jul 03 Javascript
javascript自执行函数
Feb 10 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
js实现自定义滚动条的示例
Oct 27 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
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
表单复选框向PHP传输数据的代码
2007/11/13 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
Add a Table to a Word Document
2007/06/15 Javascript
jQuery each()小议
2010/03/18 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
jquery常用操作小结
2014/07/21 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
大专生自我鉴定范文
2013/10/01 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers