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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
layui表格实现代码
2017/05/20 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
python求crc32值的方法
2014/10/05 Python
Python下的twisted框架入门指引
2015/04/15 Python
Python+微信接口实现运维报警
2016/08/27 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
浅谈python出错时traceback的解读
2020/07/15 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
安全生产标语
2014/06/06 职场文书
电教室标语
2014/06/20 职场文书
大一新生期末自我评价
2014/09/12 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
硕士学位申请报告
2015/05/15 职场文书
六年级作文之自救
2019/12/19 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python