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的面向对象(二)
Nov 09 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
用js编写留言板
Mar 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
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
安全生产投入制度
2014/01/29 职场文书
运动会800米加油稿
2014/02/22 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
阿甘正传观后感
2015/06/01 职场文书
转学证明范本
2015/06/19 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
Python实现批量自动整理文件
2022/03/16 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏