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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
vue界面发送表情的实现代码
Sep 11 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按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
Git命令之分支详解
2021/03/02 PHP
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
keras多显卡训练方式
2020/06/10 Python
大学生学业生涯规划
2014/01/05 职场文书
演讲稿格式范文
2014/05/19 职场文书
个人委托书范本
2014/09/13 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android