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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
vue的滚动条插件实现代码
Sep 07 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实现简单爬虫的开发
2016/03/28 PHP
PHP线程的内存回收问题
2016/07/08 PHP
js几个验证函数代码
2010/03/25 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python实现的爬虫功能代码
2017/06/24 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python实现停车管理系统
2018/11/30 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
Linux的主要特性
2016/09/03 面试题
运动会稿件300字
2014/02/14 职场文书
书香校园建设方案
2014/05/02 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
民主评议党员个人总结
2015/02/13 职场文书
工作一年自我鉴定
2019/06/20 职场文书
JS数组去重详情
2021/11/07 Javascript
php实现自动生成验证码的实例讲解
2021/11/17 PHP
详解OpenCV曝光融合
2022/04/29 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS