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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
深入理解js中this的用法
May 28 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
随鼠标移动的时钟非常漂亮遗憾的是只支持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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python比较2个xml内容的方法
2015/05/11 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
thinkphp5 路由分发原理
2021/03/18 PHP
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
法学毕业生自荐信
2013/11/13 职场文书
运动会入场词50字
2014/02/20 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
爱国电影观后感
2015/06/19 职场文书
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js