jquery全选checkBox功能实现代码(取消全选功能)


Posted in Javascript onDecember 10, 2013

 

 <!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=gbk" />
 <link href="css/ingrid.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="jquery-1.3.2.js" type="text/javascript"></script>
 <SCRIPT LANGUAGE="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="";
          $("[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 计算两个整数的百分比值
Dec 26 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
javascript中文本框中输入法切换的问题
Dec 10 #Javascript
javascript 数字格式化输出的实现代码
Dec 10 #Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 #Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 #Javascript
浅析jQuery1.8的几个小变化
Dec 10 #Javascript
Javascript中各种trim的实现详细解析
Dec 10 #Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 #Javascript
You might like
php win下Socket方式发邮件类
2009/08/21 PHP
PHP关联链接常用代码
2012/11/05 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP实现验证码校验功能
2017/11/16 PHP
flexigrid 参数说明
2010/11/23 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
Seajs源码详解分析
2019/04/02 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
写自荐信三大法宝
2014/01/24 职场文书
工作自我评价怎么写
2014/01/29 职场文书
西门豹教学反思
2014/02/04 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
放假通知范文
2015/04/14 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js