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 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
jsPDF导出pdf示例
May 02 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 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
Snoopy类使用小例子
2008/04/15 PHP
php查看session内容的函数
2008/08/27 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php长字符串定义方法
2012/07/12 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP调用其他文件中的类
2018/04/02 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
python时间time模块处理大全
2020/10/25 Python
主题实践活动总结
2014/05/08 职场文书
闪闪红星观后感
2015/06/08 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
详解Python中的for循环
2022/04/30 Python
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL