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动态加载图片数据练习代码
Aug 04 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
node中使用shell脚本的方法步骤
Mar 23 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实现分页显示
2015/11/03 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
Js的MessageBox
2006/12/03 Javascript
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python实现周期方波信号频谱图
2018/07/21 Python
python语言元素知识点详解
2019/05/15 Python
django框架两个使用模板实例
2019/12/11 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python