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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
详解ES6中的let命令
Apr 05 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
详解小程序开发经验:多页面数据同步
May 18 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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
PHP5中MVC结构学习
2006/10/09 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
理解Python中的With语句
2015/02/02 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
计算机系毕业生推荐信
2013/11/06 职场文书
学习心得体会
2014/01/01 职场文书
单身联谊活动方案
2014/01/29 职场文书
法律专业求职信
2014/05/24 职场文书
民间个人借款协议书
2014/09/30 职场文书
一级电子管军用接收机测评
2022/04/05 无线电