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刷新网页的方法
Jun 04 Javascript
js实现汉字排序的方法
Jul 23 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
node crawler如何添加promise支持
Feb 01 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小马小结(方便查找后门的朋友)
2012/05/05 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
javascript this用法小结
2008/12/19 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python算术运算符实例详解
2017/05/31 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python三大神器之fabric使用教程
2019/06/10 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Python 可视化神器Plotly详解
2020/12/26 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
高性能装备提升营地:Kammok
2019/02/27 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
表彰先进集体通报
2014/01/12 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
乐山大佛导游词
2015/02/02 职场文书
信访工作个人总结
2015/03/03 职场文书