jquery判断checkbox(复选框)是否被选中的代码


Posted in Javascript onOctober 20, 2010
//是否被选中验证有选中的return true,否return false 
function mycheckbox() { 
var falg = 0; 
$("input[name='soft[]']:checkbox").each(function () { 
if ($(this).attr("checked")) { 
falg += 1; 
} 
}) 
if (falg > 0) 
return true; 
else 
return false; 
}

这是一个比较不错的方法,收藏了。
下面这个函数是对上面的补充:
本来就是这种写法啊。jq1.42的写法。 
其次,建议你的逻辑处理 
function mycheckbox() { 
var falg = 0; 
$("input[name='soft[]']:checkbox").each(function () { 
if ($(this).attr("checked")) { 
falg =1; 
return false; 
} 
}) 
if (falg > 0) 
return true; 
else 
return false; 
}

下面是简单的判断
jquery核心判断语句判断语句

if($('input:checkbox').attr("checked")==true)

谁都知道 在html 如果一个复选框被选中 是 checked="checked"。
但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked
所以很多朋友判断 if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr("checked")==true)

例子里面包括了一下几个功能。
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<SCRIPT LANGUAGE="JavaScript" src="http://www.cnjquery.com/demo/jquery.js"></script > 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
$("document").ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');//全选 
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");//取消全选 
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){ if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked",'true'); 
} 
}) 
}) 
$("#btn5").click(function(){ 
var str=""; 
$("[name='checkbox'][checked]").each(function(){ 
str+=$(this).val()+""r"n"; 
//alert($(this).val()); 
}) 
alert(str); 
}) 
}) 
//--> 
</SCRIPT> 
</HEAD> 
<BODY> 
<form name="form1" method="post" action=""> 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="取消全选"> 
<input type="button" id="btn3" value="选中所有奇数"> 
<input type="button" id="btn4" value="反选"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
<br> 
<input type="checkbox" name="checkbox" value="checkbox1"> 
checkbox1 
<input type="checkbox" name="checkbox" value="checkbox2"> 
checkbox2 
<input type="checkbox" name="checkbox" value="checkbox3"> 
checkbox3 
<input type="checkbox" name="checkbox" value="checkbox4"> 
checkbox4 
<input type="checkbox" name="checkbox" value="checkbox5"> 
checkbox5 
<input type="checkbox" name="checkbox" value="checkbox6"> 
checkbox6 
<input type="checkbox" name="checkbox" value="checkbox7"> 
checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> 
checkbox8 
</form>
/************单个checkbox全选************************/ 
function clickCheckbox() { 
if($("#checkPathAll").attr("checked")) 
{ 
$("input[name='checkPath']").each(function() { 
$(this).attr("checked", true); 
}); 
} 
else 
{ 
$("input[name='checkPath']").each(function() { 
$(this).attr("checked", false); 
}); 
} 
}
Javascript 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
原生js实现选项卡功能
Mar 08 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 #Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 #Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 #Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 #Javascript
理解Javascript_12_执行模型浅析
Oct 18 #Javascript
理解Javascript_11_constructor实现原理
Oct 18 #Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 #Javascript
You might like
php修改时间格式的代码
2011/05/29 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python中文编码知识点
2019/02/18 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
python实现二分查找算法
2020/09/18 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
vue+django实现下载文件的示例
2021/03/24 Vue.js
档案信息化建设方案
2014/05/16 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
2014年法务工作总结
2014/12/11 职场文书
感谢信怎么写
2015/01/21 职场文书
礼仪培训心得体会
2016/01/22 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书