用JavaScript使页面上的一组checkbox全选/取消全选，逻辑很简单，实现代码也没有太难的语法。但使用jQuery实现则更简单，代码也很简洁，精辟！

jQuery版本：1.3.2

 <html>

 <head>

 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>

 </head>

 <body>

 <input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />

 <input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />

 <input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />

 <input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />

 <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选

 <script type="text/javascript">

 $("#chk_all").click(function(){

      $("input[name='chk_list']").attr("checked",$(this).attr("checked"));

 });

 </script>

 </body>

 </html>

jQuery.attr  获取/设置对象的属性值,如：

$("input[name='chk_list']").attr("checked");     //读取所有name为'chk_list'对象的状态（是否选中）

$("input[name='chk_list']").attr("checked",true);      //设置所有name为'chk_list'对象的checked为true

再如：

$("#img_1").attr("src","test.jpg");    //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src");     //读取ID为img_1的<img>src值

下面的代码是获取上面实例中选中的checkbox的value值:

 <script type="text/javascript">

     //获取到所有name为'chk_list'并选中的checkbox(集合)

     var arrChk=$("input[name='chk_list]:checked");

     //遍历得到每个checkbox的value值

     for (var i=0;i<arrChk.length;i++)

     {

          alert(arrChk[i].value);

     }

 </script>

用$.each()

 <script type="text/javascript">

     var arrChk=$("input[name='chk_list']:checked");

     $(arrChk).each(function(){

        window.alert(this.value);

     });

 });

 </script>
 <script type="text/javascript">

     $("#chk_all").click(function(){

         $("input[name='chk_list']").attr("checked",$(this).attr("checked"));

         $("input[name='chk_list']").each(function() {

             window.alert(this.value);

         });

     });

 </script>

其他网友的

//全选、取消全选的事件

    function selectAll() {

//#checkedAll是全选的那个checkbox

        if ($("#checkedAll").attr("checked")) {

//：checkbox  是选中了所有的<input> type为 checkbox的对象

            $(":checkbox").attr("checked", true);

        } else {

            $(":checkbox").attr("checked", false);

        }

    }

下面两种方式差不多

   $(function() {

           $("#checkAll").click(function() {

                $('input[name="subBox"]').attr("checked",this.checked);

            });

            var $subBox = $("input[name='subBox']");

            $subBox.click(function(){

                $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);

            });

        });

javascript

1 //设置全选或取消全选

 2 //需要参数cb：即“全选”复选框，函数需要知道此复选框是否处于选定状态

 3 function selectAll(cb){

 4     //选择数据表中的所有记录行前的checkbox

 5     var cbList = document.getElementsByName('adminID');

 6

 7     for(var i=0; i<cbList.length; i++){

 8         cbList[i].checked = cb.checked;

 9     }

10 }

jQuery--checkbox全选/取消全选的更多相关文章

  1. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  3. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  4. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  5. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  6. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

  7. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  8. Vue 全选/取消全选，反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  9. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

随机推荐

  1. Android 属性动画（Property Animation） 全然解析 （下）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...

  2. 一种基于Qt的可伸缩的全异步C/S架构server实现(二) 网络传输

    二.网络传输模块 模块相应代码命名空间    (namespace ZPNetwork) 模块相应代码存储目录    (\ZoomPipeline_FuncSvr\network) 2.1 模块结构 ...

  3. 从Android Handler内部类到WeakReference的知识关联

    Handler: 普通使用方法: Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Message msg){}方法 ...

  4. mysql 服务不见了的解决办法

    昨天打开电脑mysql突然连接不了了,去服务里找,却找不到mysql服务了 解决:5.0版本:开始->运行->cmd,进到mysql安装的bin目录D:\MySQL\bin>mysq ...

  5. Ascll

    ascll - 概述 ASCII码(American Standard Code for Information Interchange, 美国标准信息交换码).   信息编码就是将表示信息的某种符号 ...

  6. 获取设备的UUID

    很多时候需要获取设备的UUID,比如在蓝牙交互时,需要获取服务和特征的UUID,那么如何获取设备的UUID呢?请见如下代码: // // ViewController.m // 获取UUID // / ...

  7. Sql Server trace flags

    Tace flag number Description -T1205 每次deadlock算法运行时,都收集相关的信息 -T1204 当deadlock算法发现死锁时才收集相关信息 -T3604 把 ...

  8. Windows环境搭建Red5流媒体服务器指南(转)

    Windows环境搭建Red5流媒体服务器指南 Windows环境搭建Red5流媒体服务器指南 测试环境:Windows 7 一.   下载安装程序 red5-server 下载地址 https:// ...

  9. （转）C/C++中static关键字

    下面的转自http://www.cnblogs.com/yc_sunniwell/archive/2010/07/14/1777441.html 静态变量作用范围在一个文件内,程序开始时分配空间,结束 ...

  10. Object转换为JSON格式字符串

    简介: 把JS的Object转换为Json字符串. 代码: function ObjectToJson(object) { // Object转换为josn var json = "&quo ...