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 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
vant中的toast层级改变操作
Nov 04 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
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
javascript事件模型介绍
2016/05/31 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
js尾调用优化的实现
2019/05/23 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
python实现统计代码行数的方法
2015/05/22 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python实现购物程序思路及代码
2017/07/24 Python
python学习必备知识汇总
2017/09/08 Python
python实现感知器
2017/12/19 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Python Pillow Image Invert
2019/01/22 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
音乐教师求职信范文
2015/03/20 职场文书
手残删除python之后的补救方法
2021/06/26 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android