js 判断checkbox是否选中的实现代码


Posted in Javascript onNovember 23, 2010

今天再写个小功能判断checkbox是否选中与操作完以后将checkbox设置为选中状态的需求,那么就可以参考下面的代码了

1、判断是否选中可以用如下代码

原生js

if(document.getElementById("insDown").checked){

}

jquery的实现代码

1, $(checkbox的id).prop("checked") 返回的是一个boolean值类型

2, $(this).is(":checked") 返回的也是一个boolean值类型2

、设置选中状态

原生js

document.getElementById("insDown").checked=true;

jquery的实现代码

$("#insDown").prop("checked", true);

$("#cb1").prop("checked","checked");
$("#cb1").prop("checked",true);

完整代码

//第几个没有选 

<input type="checkbox" name="checkbox1" checked> 
<input type="checkbox" name="checkbox1"> 
<input type="checkbox" name="checkbox1" checked> 
<input type="checkbox" name="checkbox1"> 
<input type="checkbox" name="checkbox1"> 
<script language=javascript> 
function check(obj) 
{ 

for(i=0;i<document.all(obj).length;i++) 
{ 
if(!document.all(obj)[i].checked)alert("第"+(i+1)+"个没有选择") 
} 
} 
</script> 
<input type=button onclick="check('checkbox1')" value="检测"> 
//一个也没有选 
<input type="checkbox" name="test"> 
<input type="checkbox" name="test"> 
<input type="checkbox" name="test"> 
<input type="checkbox" name="test"> 
<input type="checkbox" name="test"> 
<Script Language="JavaScript"> 
function check(obj){ 
for(i=0;i<document.all(obj).length;i++){ 
if(document.all(obj)(i).checked){ 
return; 
} 
} 
window.alert('一个也没有选!'); 
} 
</Script> 
<input type=button onclick="check('test');" value="检测"> 

//第几个没有选 
<input type="checkbox" name="checkbox1" checked> 
<input type="checkbox" name="checkbox1"> 
<input type="checkbox" name="checkbox1" checked> 
<input type="checkbox" name="checkbox1"> 
<input type="checkbox" name="checkbox1"> 
<script language=javascript> 
function check(obj) 
{ 

for(i=0;i<document.all(obj).length;i++) 
{ 
if(!document.all(obj)[i].checked)alert("第"+(i+1)+"个没有选择") 
} 
} 
</script> 
<input type=button onclick="check('checkbox1')" value="检测"> 


//一个也没有选 


<input type="checkbox" name="test"> 
<input type="checkbox" name="test"> 
<input type="checkbox" name="test"> 
<input type="checkbox" name="test"> 
<input type="checkbox" name="test"> 
<Script Language="JavaScript"> 
function check(obj){ 
for(i=0;i<document.all(obj).length;i++){ 
if(document.all(obj)(i).checked){ 
return; 
} 
} 
window.alert('一个也没有选!'); 
} 
</Script> 
<input type=button onclick="check('test');" value="检测">

这篇文章就结束了,更多的请查看三水点靠木以前发布的文章。

Javascript 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
js 处理URL实用技巧
Nov 23 #Javascript
两个Javascript小tip资料
Nov 23 #Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 #Javascript
jquery 学习之二 属性相关
Nov 23 #Javascript
jquery 学习之一 对象访问
Nov 23 #Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 #Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 #Javascript
You might like
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
python实现百度关键词排名查询
2014/03/30 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python实现k-means算法
2018/02/23 Python
Python常见的pandas用法demo示例
2019/03/16 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
python实现指定ip端口扫描方式
2019/12/17 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
Python截图并保存的具体实例
2021/01/14 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
python包的导入方式总结
2021/03/02 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
小区消防演习方案
2014/02/21 职场文书
应急处置方案
2014/06/16 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
Python实现双向链表基本操作
2022/05/25 Python