javascript获取checkbox复选框获取选中的选项


Posted in Javascript onAugust 12, 2014

有关javascript 获取checkbox复选框的实例数不胜数,下面的这个示例,纯js实现的

var form = document.getElementById("form2");

var field = form.elements["test2"];
var option = Dining.getSelectedOption(form, field);
var message = "";
for (var i = 0, len = option.length; i < len; i++) {
message += "Select id:" + option[i].id + "\nSelected name:" + option[i].name + "\nSelected value:" + option[i].value + "\n\n";
}
alert(message);
/*获取选中的选项*/
getSelectedOption: function (selectform, selectionfield) {
var result = [];
var option = null;
for (var i = 0; i < selectionfield.length; i++) {
option = selectionfield[i];
if (option.checked) {
result.push(option);
}

}
return result;

}
<form id='form2'>

<label>排序:</label><input id='aaaaa' type='checkbox' name='test2' value='1'>

<label for='aaaaa'>月销量</label><input id='bbbbb' type='checkbox' name='test2' value='2'>

<label for='bbbbb'>评分</label><input id='ccccc' type='checkbox' name='test2' value='3'>

<label for='ccccc'>优惠</label> <br style='clear:both'><label>分类:</label><input id='ddddd' type='checkbox' name='test2' value='4'>

<label for='ddddd'>商务套餐</label><input id='eeeee' type='checkbox' name='test2' value='5'>

<label for='eeeee'>凉菜</label><input id='fffff' type='checkbox' name='test2' value='6'>

</form>",
Javascript 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 #Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 #Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 #Javascript
JavaScript Promise启示录
Aug 12 #Javascript
深入理解Javascript中this的作用域
Aug 12 #Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 #Javascript
JavaScript弹出窗口方法汇总
Aug 12 #Javascript
You might like
php URL跳转代码 减少外链
2011/06/25 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PDO::setAttribute讲解
2019/01/29 PHP
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
node 版本切换的实现
2020/02/02 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python简单实现获取当前时间
2016/08/27 Python
Python贪心算法实例小结
2018/04/22 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
Python3并发写文件与Python对比
2019/11/20 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
如何用python处理excel表格
2020/06/09 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
介绍一下Python下range()函数的用法
2013/11/07 面试题
2015年初中教师个人工作总结
2015/07/21 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python