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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
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
DedeCms模板安装/制作概述
2007/03/11 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
JS实现百度搜索框
2021/02/25 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python lxml模块安装教程
2015/06/02 Python
Django与JS交互的示例代码
2017/08/23 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python lambda表达式用法实例分析
2018/12/25 Python
护士岗位职责
2014/02/16 职场文书
奥利奥广告词
2014/03/20 职场文书
志愿者宣传口号
2014/06/17 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
旷工检讨书1000字
2015/01/01 职场文书
考试作弊检讨书
2015/01/27 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js