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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
ES6数组的扩展详解
Apr 25 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
这样回答继承可能面试官更满意
Dec 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
浅谈php优化需要注意的地方
2014/11/27 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
35个Python编程小技巧
2014/04/01 Python
Python中请使用isinstance()判断变量类型
2014/08/25 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python中退出多层循环的方法
2018/11/27 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Python爬虫与反爬虫大战
2020/07/30 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
小学教师岗位职责
2013/11/25 职场文书
电工技术比武方案
2014/05/11 职场文书
如何写早恋检讨书
2014/09/10 职场文书
教师党员承诺书2015
2015/01/21 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python