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 相关文章推荐
jquery动态添加option示例
Dec 30 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 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.NET的入门教程
2006/10/09 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
使用python存储网页上的图片实例
2018/05/22 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
利用python实现AR教程
2019/11/20 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
年度评优评先方案
2014/06/03 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android