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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php制作文本式留言板
2015/03/18 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
python解析文件示例
2014/01/23 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python 实现return返回多个值
2019/11/19 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
Linux文件系统类型
2012/09/16 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
迎八一活动主题
2014/01/31 职场文书
大学军训感想
2014/02/12 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
个人委托书怎么写
2014/04/04 职场文书
2014年转正工作总结
2014/11/08 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
严以用权学习心得体会
2016/01/12 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python
用Python将GIF动图分解成多张静态图片
2021/06/11 Python