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 相关文章推荐
JQuery 学习笔记 选择器之五
Jul 23 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
vue 弹出遮罩层样式实例
Jul 22 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
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
python模块smtplib学习
2018/05/22 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
教师党员承诺书
2014/03/25 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
基层党员对照检查材料
2014/08/25 职场文书
趵突泉导游词
2015/02/03 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
单位更名证明
2015/06/18 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
python turtle绘图命令及案例
2021/11/23 Python
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript