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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
详解vue axios二次封装
Jul 22 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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 Token(令牌)设计
2008/03/15 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python扩展内置类型详解
2018/03/26 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
python的等深分箱实例
2019/11/22 Python
python 实现音频叠加的示例
2020/10/29 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
诚信高考倡议书
2019/06/24 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
ztree+ajax实现文件树下载功能
2021/05/18 Javascript