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 select操作的日期联动实现代码
Dec 06 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
关于vue-router路径计算问题
May 10 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
React如何避免重渲染
Apr 10 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
用js实现放大镜效果
Oct 28 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
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
javascript读写json示例
2014/04/11 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
import的本质解析
2017/10/30 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
新学期红领巾广播稿
2014/01/14 职场文书
企业内控岗位的职责
2014/02/07 职场文书
经典洗发水广告词
2014/03/13 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
同学会主持词
2014/03/18 职场文书
绿色环保演讲稿
2014/05/10 职场文书
解除施工合同协议书
2014/10/17 职场文书
2014年食堂工作总结
2014/11/20 职场文书
七年级地理教学计划
2015/01/22 职场文书
教师党员自我评价2015
2015/03/04 职场文书
自我推荐信格式模板
2015/03/24 职场文书
大学生实习推荐信
2015/03/27 职场文书
音乐之声观后感
2015/06/04 职场文书
全民创业工作总结
2015/08/13 职场文书