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 19 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 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+highchats生成动态统计图
2014/05/21 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
Python正则表达式经典入门教程
2017/05/22 Python
python3设计模式之简单工厂模式
2017/10/17 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
大三学习计划书范文
2014/05/02 职场文书
实习证明格式范文
2014/10/14 职场文书
2014年党支部工作总结
2014/11/13 职场文书
先进典型事迹材料
2014/12/29 职场文书
房产遗嘱范本
2015/08/06 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
Tomcat配置访问日志和线程数
2022/05/06 Servers