JavaScript简单判断复选框是否选中及取出值的方法


Posted in Javascript onAugust 13, 2015

本文实例讲述了JavaScript简单判断复选框是否选中及取出值的方法。分享给大家供大家参考。具体如下:

这里使用JavaScript 获取复选框的值,有朋友在刚开始利用表单提交数据的时候,一般都会遇到表单中有一个特别的元素——复选框,判断它是否选中以及获取它的值 ,好像跟其它的表单元素有点不一样,本代码将为您展示如何获取复选框的值并判断是否被选中。

运行效果如下图所示:

JavaScript简单判断复选框是否选中及取出值的方法

具体代码如下:

<title>JavaScript 获取复选框的值</title>
<script>
function checkbox()
{
var str=document.getElementsByName("box");
var objarray=str.length;
var chestr="";
for (i=0;i<objarray;i++)
{
 if(str[i].checked == true)
 {
  chestr+=str[i].value+",";
 }
}
if(chestr == "")
{
 alert("请先选择复选框~!");
}
else
{
 alert("复选框的值是:"+chestr);
}
}
</script>
选择您的拿手技术:
<input type="checkbox" name="box" id="box1" value="ASP" />ASP
<input type="checkbox" name="box" id="box2" value="PHP" />PHP
<input type="checkbox" name="box" id="box3" value="JSP" />JSP
<input type="button" name="button" id="button" onclick="checkbox()" value="提交" />

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 #Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 #Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 #Javascript
深入学习JavaScript中的原型prototype
Aug 13 #Javascript
javascript获取本机操作系统类型的方法
Aug 13 #Javascript
javascript中offset、client、scroll的属性总结
Aug 13 #Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 #Javascript
You might like
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php读取csc文件并输出
2015/05/21 PHP
php格式文件打开的四种方法
2018/02/24 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
js form action动态修改方法
2008/11/04 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
react的hooks的用法详解
2020/10/12 Javascript
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python实现最大优先队列
2019/08/29 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
经济管理专业自荐信
2013/12/30 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
学校四风对照检查材料
2014/08/28 职场文书
车辆年审委托书范本
2014/09/18 职场文书
买房子个人收入证明
2014/10/12 职场文书
英语教师个人总结
2015/02/09 职场文书
同学聚会开幕词
2019/04/02 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
vue如何清除浏览器历史栈
2022/05/25 Vue.js