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 相关文章推荐
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
Javascript基础之数组的使用
May 13 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
JS常用知识点整理
Jan 21 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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 反向排序和随机排序代码
2010/06/30 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
JQuery live函数
2010/12/24 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python杀死一个线程的方法
2015/09/06 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
django文档学习之applications使用详解
2018/01/29 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
python编写计算器功能
2019/10/25 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
竞选演讲稿范文
2013/12/28 职场文书
公司活动邀请函
2014/01/24 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js