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 常用校验函数
Mar 26 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
python模块之StringIO使用示例
2015/04/08 Python
Python中max函数用法实例分析
2015/07/17 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Python实现自动发送邮件功能
2021/03/02 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python如何获取文件路径/目录
2020/09/22 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
简述数组与指针的区别
2014/01/02 面试题
电子商务专业推荐信范文
2013/12/02 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
大学生秋游活动方案
2014/02/17 职场文书
打架检讨书2000字
2014/02/22 职场文书
元宵节主持词
2014/03/25 职场文书
研究生求职自荐书
2014/06/23 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
淮海战役观后感
2015/06/11 职场文书