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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
JS script脚本中async和defer区别详解
Jun 24 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
多人战的战术与战略
2020/03/04 星际争霸
PHP4引用文件语句的对比
2006/10/09 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
Node.js的特点详解
2017/02/03 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python换行与不换行的输出实例
2020/02/19 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
运动会广播稿400字
2014/01/25 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
父亲去世追悼词
2015/06/23 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
python如何读取.mtx文件
2021/04/22 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis