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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
关于JavaScript的一些看法
May 27 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
node.js制作一个简单的登录拦截器
Feb 10 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 常见郁闷问题答解
2006/11/25 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
大学生会计职业生涯规划范文
2014/02/28 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
保洁员岗位职责
2015/02/04 职场文书
大二学年个人总结
2015/03/03 职场文书
该怎么书写道歉信?
2019/07/03 职场文书