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 table布局
Oct 08 Javascript
js 动态选中下拉框
Nov 26 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
javascript中的隐式调用
2018/02/10 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python中list初始化方法示例
2016/09/18 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
对python中的argv和argc使用详解
2018/12/15 Python
在django view中给form传入参数的例子
2019/07/19 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
AOP的定义以及作用
2013/09/08 面试题
如何进行Linux分区优化
2013/02/12 面试题
2014全国两会心得体会
2014/03/17 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
融资合作协议书范本
2014/10/17 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python