javascript判断checkbox是否被选中
时间:2017-03-21
js要判断checkbox是否被选中,可以使用checkbox的checked属性来判断,如果checkbox的checked属性为true则表示复选框checkbox已选中,否则表示没有选中,本文章向大家介绍javascript如何判断checkbox是否被选中,需要的朋友可以参考一下。
1. 当表单里面只有一个checkbox复选框时,这时候很容易判断checkbox复选框是否被选中,如下实例:
<div id="divId" class="divTable">
<div class="tableBody">
<ul ><li ><input id="ck1" type="checkbox" value="501" ></li></ul>
</div>
</div>
<script>
if(document.getElementById("ck1").checked){
alert("checkbox is checked");
}
</script>
document.getElementById("ck1").checked用于获取id为ck1的复选框的checked属性值,如果为true表示复选框选中,否则没有被选中。
2。 当表单里有n个checkbox的时候,我们需要使用js遍历来分别判断每个checkbox复选框checked属性值, 如:
<input type="checkbox" id="cashbagSaveYN" name="cashbagSaveYN" value="" />
<input type="checkbox" id="cashbagSaveYN" name="cashbagSaveYN" value="" />
<input type="checkbox" id="cashbagSaveYN" name="cashbagSaveYN" value="" />
function ifChecked()
{
var a = document.getElementsByName("cashbagSaveYN");
var n = a.length;
var k = 0;
for (var i=0; i<n; i++){
if(a[i].checked){
k = 1;
}
}
if(k==0){
alert("请选中Checkbox!");
return;
}
}
document.getElementsByName("cashbagSaveYN")获取到HTML文档中的所以checkbox,结果为一个数组,数组的元素为每个checkbox对象,然后我们使用for遍历这个数组,分别判断每个checkbox的checked属性值,从而来获取checkbox复选框是否被选中。
再看一个实例,该实例也是演示javascript如何判断checkbox是否被选中的。
<html>
<form name="orderForm">
<input type="checkbox" name="door4">4 doors<br>
<input type="checkbox" name="door2">2 doors<hr>
<input type="button" value="Submit Order" name="orderButton" onClick="submitOrder()">
</form>
<script language="JavaScript">
function submitOrder() {
if((document.orderForm.door4.checked == true) && (document.orderForm.door2.checked == true)){
console.log("You selected two different door styles. Reselect door style.");
document.orderForm.door4.checked = false;
document.orderForm.door2.checked = false;
}else if((document.orderForm.door4.checked == false) && (document.orderForm.door2.checked == false)){
console.log("You did not select a door style! Please select a door style.");
} else {
var alertString = String("Order: ");
if(document.orderForm.door4.checked == true)
alertString += "4 doors.";
if(document.orderForm.door2.checked == true)
alertString += "2 doors.";
console.log(alertString);
}
}
</script>
</html>
- Python之numpy数组学习(二)
- Intent 属性详解(上)
- 复仇行动:Notepad++官网被圣战组织黑了
- 四大组件的纽带——Intent
- 利用HTC One漏洞破解手机PIN密码
- Android NDk环境配置
- 谷歌再曝Windows8.1漏洞,微软怒了
- Python机器学习的生态系统
- TP-link TL-WR840N系列路由器存在CSRF漏洞,可修改任意配置(含POC测试过程)
- JavaScript严格模式
- 微软修复8个安全漏洞,包括谷歌披露的0day漏洞
- PullToRefreshScrollView 嵌套RecyclerView实现特卖列表倒计时抢购
- 全栈数据工程师养成攻略:Python 基本语法
- 从卷积神经网络的角度看世界
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第004课 vi编辑器的使用详解
- 【前端JQ】jQuery赋值checked的几种写法,attr()方法不好使,建议使用prop()方法。
- 达梦数据库适配问题
- Angular Component UI单元测试的隔离策略
- 第005课 linux进阶命令(文件查找,文件解压操作详解)
- 没有这 29 款插件的 Chrome 是没有灵魂的
- 第006课 开发板熟悉与体验
- Angular Observable数据类型的单元测试数据准备
- 第007课 裸机开发步骤和工具使用(SourceInght NotePad++使用)
- Angular jasmine.expect单步调试
- 第008课 第1个ARM裸板程序及引申(点亮LED灯)
- SharedPreferences VS MMKV
- 第009课 gcc和arm-linux-gcc和Makefile
- Go 每日一库之 quicktemplate
- 第010课 掌握Jz2440_ARM芯片时钟体系