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 EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
随鼠标移动的时钟非常漂亮遗憾的是只支持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输入流php://input使用浅析
2014/09/02 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python任务调度实例分析
2015/05/19 Python
Python ldap实现登录实例代码
2016/09/30 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
基于Django用户认证系统详解
2018/02/21 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
酒店开业庆典主持词
2014/03/21 职场文书
任命书怎么写
2014/06/04 职场文书
见习报告格式范文
2014/11/08 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL