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 相关文章推荐
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
浅谈React碰到v-if
2018/11/04 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
网游商务专员求职信
2013/10/15 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
气象学专业个人求职信
2014/03/15 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
网络营销计划
2015/01/17 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
学习党史心得体会2016
2016/01/23 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
java如何实现socket连接方法封装
2021/09/25 Java/Android
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang