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在对象中缓存选择器的简单方法
Jun 30 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
js图片轮播插件的封装
Jul 21 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 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 批量删除数据的方法分析
2009/10/30 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python+django快速实现文件上传
2016/10/24 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
python实现定时发送邮件
2020/12/23 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
《九色鹿》教学反思
2014/02/27 职场文书
计算机毕业生求职信
2014/06/10 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
罚站检讨书
2015/01/29 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers