编程 Javascript

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,超强推荐expand.js

Dec 23 Javascript

JS特权方法定义作用以及与公有方法的区别

Mar 18 Javascript

javascript ready和load事件的区别示例介绍

Aug 30 Javascript

JavaScript——DOM操作——Window.document对象详解

Jul 14 Javascript

浅谈javascript中遇到的字符串对象处理

Nov 18 Javascript

利用C/C++编写node.js原生模块的方法教程

Jul 07 Javascript

js实现导航跟随效果

Nov 17 Javascript

详解jQuery-each()方法

Mar 13 jQuery

JavaScript深入V8引擎以及编写优化代码的5个技巧

Jun 24 Javascript

vue 移动端注入骨架屏的配置方法

Jun 25 Javascript

原生JavaScript实现日历功能代码实例(无引用Jq)

Sep 23 Javascript

浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

Oct 26 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

ThinkPHP使用Smarty第三方插件方法小结

2016/03/19 PHP

php日志函数error_log用法实例分析

2019/09/23 PHP

laravel框架中表单请求类型和CSRF防护实例分析

2019/11/23 PHP

列表内容的选择

2006/06/30 Javascript

IE中createElement需要注意的一个问题

2010/07/13 Javascript

jquery ajax提交整个表单元素的快捷办法

2013/03/27 Javascript

jQuery的one()方法用法实例

2015/01/19 Javascript

js实现DOM走马灯特效的方法

2015/01/21 Javascript

jquery插件ajaxupload实现文件上传操作

2015/12/09 Javascript

jQuery 的 ready()的纯js替代方法

2016/11/20 Javascript

Bootstrap基本组件学习笔记之进度条(15)

2016/12/08 Javascript

nginx部署访问vue-cli搭建的项目的方法

2018/02/12 Javascript

JS实现的点击按钮图片上下滚动效果示例

2019/01/28 Javascript

python编程开发之类型转换convert实例分析

2015/11/13 Python

Python如何实现守护进程的方法示例

2017/02/08 Python

Python学习小技巧之列表项的排序

2017/05/20 Python

Python信息抽取之乱码解决办法

2017/06/29 Python

详解Tensorflow数据读取有三种方式（next_batch）

2018/02/01 Python

Flask之请求钩子的实现

2018/12/23 Python

python匹配两个短语之间的字符实例

2018/12/25 Python

python判断自身是否正在运行的方法

2019/08/08 Python

Python list运算操作代码实例解析

2020/01/20 Python

python爬虫学习笔记之Beautifulsoup模块用法详解

2020/04/09 Python

python多线程和多进程关系详解

2020/12/14 Python

canvas压缩图片以及卡片制作的方法示例

2018/12/04 HTML / CSS

意大利奢侈品网站：Italist

2016/08/23 全球购物

澳大利亚排名第一的狂热牛仔品牌：ONETEASPOON

2018/11/20 全球购物

俄罗斯卫浴采暖及维修用品超级市场：Dkrussia

2020/05/12 全球购物

乳制品整治工作方案

2014/05/29 职场文书

最美护士演讲稿

2014/08/27 职场文书

营运督导岗位职责

2015/04/10 职场文书

单位计划生育责任书

2015/05/09 职场文书

撤诉状格式范本

2015/05/19 职场文书

入党积极分子培养人意见

2015/06/02 职场文书

就业指导讲座心得体会

2016/01/15 职场文书

如何在CocosCreator里画个炫酷的雷达图

2021/04/16 Javascript