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的IE和Firefox兼容性汇编
Jul 01 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
js星星评分效果
Jul 24 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
实用的Vue开发技巧
May 30 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 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
推荐25款php中非常有用的类库
2014/09/29 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python之py2exe打包工具详解
2017/06/14 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
书香家庭事迹材料
2014/05/09 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
详解Laravel制作API接口
2021/05/31 PHP
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL