编程 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 相关文章推荐

JavaScript异步调用定时方法并停止该方法实现代码

Mar 16 Javascript

php图像生成函数之间的区别分析

Dec 06 Javascript

禁止IE用右键的JS代码

Dec 30 Javascript

JavaScript里实用的原生API汇总

May 14 Javascript

jQuery simplePage+AJAX plus分页插件用法实例

Feb 17 Javascript

原生javascript实现addClass,removeClass,hasClass函数

Feb 25 Javascript

JavaScript实现简单的拖动效果

Jul 02 Javascript

省市区三级联动jquery实现代码

Apr 15 Javascript

JavaScript和jQuery制作光棒效果

Feb 24 Javascript

Vue数据绑定简析小结

May 07 Javascript

Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控

May 13 Javascript

JS实现手风琴特效

Nov 08 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

允许phpmyadmin空密码登录的配置方法

2011/05/29 PHP

PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法

2015/03/07 PHP

PHP单例模式是什么 php实现单例模式的方法

2016/05/14 PHP

php封装的表单验证类完整实例

2016/10/19 PHP

EasyUI的treegrid组件动态加载数据问题的解决办法

2011/12/11 Javascript

javascript 文本框水印/占位符(watermark/placeholder)实现方法

2012/01/15 Javascript

jQuery插件开发全解析

2012/10/10 Javascript

JS图片根据鼠标滚动延时加载的实例代码

2013/07/13 Javascript

浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

2014/11/12 Javascript

JavaScript实现SHA-1加密算法的方法

2015/03/11 Javascript

js实现文字垂直滚动和鼠标悬停效果

2015/12/31 Javascript

jquery ajax双击div可直接修改div中的内容

2016/03/04 Javascript

ES6使用let命令更简单的实现块级作用域实例分析

2017/03/31 Javascript

AngularJS学习笔记之表单验证功能实例详解

2017/07/06 Javascript

vue+webpack实现异步组件加载的方法

2018/02/03 Javascript

让webpack+vue-cil项目不再自动打开浏览器的方法

2018/09/27 Javascript

js限制input只能输入有效的数字(第一个不能是小数点)

2018/09/28 Javascript

vue axios 简单封装以及思考

2018/10/09 Javascript

原生javascript实现类似vue的数据绑定功能示例【观察者模式】

2020/02/24 Javascript

Vue 的双向绑定原理与用法揭秘

2020/05/06 Javascript

详解Python发送邮件实例

2016/01/10 Python

python可视化实现代码

2019/01/15 Python

Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析

2019/11/07 Python

将pytorch转成longtensor的简单方法

2020/02/18 Python

Python中logging日志的四个等级和使用

2020/11/17 Python

CSS3中颜色线性渐变实战

2015/07/18 HTML / CSS

意大利在线大学图书馆：Libreria universitaria

2019/07/16 全球购物

介绍一下Linux文件的记录形式

2013/09/29 面试题

财务主管的岗位职责

2013/12/30 职场文书

关于元旦的广播稿

2014/02/16 职场文书

安全标准化实施方案

2014/02/20 职场文书

小班上学期评语

2014/05/05 职场文书

音乐课外活动总结

2015/05/09 职场文书

企业安全生产检查制度

2015/08/06 职场文书

【海涛解说】pis亲自推荐，其实你从来不会玩NW

2022/04/01 DOTA

详解Python中的for循环

2022/04/30 Python