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 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
JSON stringify方法原理及实例解析
Oct 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 xml 入门学习资料
2011/01/01 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
python绘制简单折线图代码示例
2017/12/19 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python selenium firefox使用详解
2019/02/26 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
心得体会范文
2014/01/04 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
优秀教师演讲稿
2014/05/06 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书