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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
禁止刷新,回退的JS
Nov 25 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 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面向对象分析设计的经验原则
2008/09/20 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
php实例化一个类的具体方法
2019/09/19 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
vue-router单页面路由
2017/06/17 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python正则-re的用法详解
2019/07/28 Python
python 录制系统声音的示例
2020/12/21 Python
社区活动总结报告
2014/05/05 职场文书
家长学校工作方案
2014/05/07 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
七夕情人节问候语
2015/11/11 职场文书