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控件
May 07 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
深入理解Python中的super()方法
2017/11/20 Python
python中set()函数简介及实例解析
2018/01/09 Python
python批量赋值操作实例
2018/10/22 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
大学生学习2014全国两会心得体会
2014/03/13 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
旷工辞退通知书
2015/04/17 职场文书
师德承诺书2015
2015/04/28 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
上班旷工检讨书
2015/08/15 职场文书
安全生产标语口号
2015/12/26 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
Spring Boot实现文件上传下载
2022/08/14 Java/Android