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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
jqgrid 简单学习笔记
May 03 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
Javascript 解构赋值详情
Nov 17 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
一个好用的分页函数
2006/11/16 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
python实现多线程采集的2个代码例子
2014/07/07 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
丑小鸭教学反思
2014/02/03 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
指导老师鉴定意见
2015/06/05 职场文书
关于军训的感想
2015/08/07 职场文书