jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码


Posted in Javascript onFebruary 21, 2014

jQuery判断checkbox(复选框)是否被选中:
if($("#id").attr("checked")==true)

jQuery实现checkbox(复选框)选中、全选/反选代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery如何判断checkbox(复选框)是否被选中以及全选、反选</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
 $("#all").click(function(){   
  if(this.checked){   
   $("input[name='checkbox']").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");   
  }else{   
   $("input[name='checkbox']").each(function(){this.checked=false;});   
   $("#btn1").attr("value","全选"); 
  }   
 }); $("#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="";
  //$("input:checkbox[name='checkbox']:checked").each(function(){//可以
  $("[name='checkbox'][checked]").each(function(){
   str+=$(this).val()+"\r\n";
  });
  alert(str);
 });
});

//-->
</script>
</head>
<body>
    <form name="form1" method="post" action="">
     <input type="checkbox" id="all" name="all">
        <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>
</body>
</html>
Javascript 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
javascript 闭包详解
Jul 02 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 #Javascript
jquery五角星评分插件示例分享
Feb 21 #Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 #Javascript
jquery自定义滚动条插件示例分享
Feb 21 #Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 #Javascript
利用Jquery实现可多选的下拉框
Feb 21 #Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
JSON格式化输出
2014/11/10 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
keras得到每层的系数方式
2020/06/15 Python
详解Python模块化编程与装饰器
2021/01/16 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
农贸市场管理制度
2014/01/31 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
出生公证书
2015/01/23 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书