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 复合选择器应用的几个例子
Sep 11 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
vue 实现路由跳转时更改页面title
Nov 05 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转义输出HTML到JavaScript
2015/03/27 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python多线程并发及测试框架案例
2019/10/15 Python
python实现猜拳游戏
2020/03/04 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
财务主管自我鉴定
2014/01/17 职场文书
酒店员工检讨书
2014/02/18 职场文书
小学教师培训方案
2014/06/09 职场文书
观后感的写法
2015/06/19 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
500字作文之周记
2019/12/13 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
python Tkinter模块使用方法详解
2022/04/07 Python