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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
JS+CSS实现动态时钟
Feb 19 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开发中的中文编码问题
2013/08/08 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
使用PHP开发留言板功能
2019/11/19 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python批量修改文件名的实现代码
2014/09/01 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python ETL工具 pyetl
2020/06/07 Python
Python实现爬取并分析电商评论
2020/06/19 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
思想政治自我鉴定
2013/10/06 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
团日活动总结书
2014/05/08 职场文书
节电标语大全
2014/06/23 职场文书
银行先进个人总结
2015/02/15 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Java线程的6种状态与生命周期
2022/05/11 Java/Android