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学习笔记之jQuery的事件
Dec 22 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 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
基于simple_html_dom的使用小结
2013/07/01 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
基于python生成器封装的协程类
2019/03/20 Python
详解Django admin高级用法
2019/11/06 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python接口自动化测试的实现
2020/08/28 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
学习十八大报告感言
2014/02/04 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
社区义诊活动总结
2014/04/30 职场文书
反邪教观后感
2015/06/11 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
MySQL数据库 安全管理
2022/05/06 MySQL