用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. Innobackupex 全备数据库

    对于MySQL数据库的热备.xtrabackup是除了MySQL enterprise backup之外的不二之选. 该工具提供了基于innodb存储引擎的热备.支持全量,增量备份,部分备份,时点恢复 ...

  2. 【极客学院出品】Cocos2d-X系列课程之九-BOX2D物理引擎

    Cocos2d-x 是时下最热门的手游引擎,在国内和国外手机游戏开发使用的份额各自是70%和25%,在App Store的top10中,有7个是用它开发的. 本节课程为Cocos2d-x系列课程之九, ...

  3. Android系统Surface机制的SurfaceFlinger服务的启动过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8022957 在前面一篇文章中,我们简要介绍了A ...

  4. 使用jqMobi开发app基础：弹出内容的设计

    设计APP,因为屏幕非常小.在PC网页山能够放在一体的内容.在APP中就不能放在一起了. 比如例如以下.项目出勤人员非常多,须要弹出一个panel.然后让用户选择,怎样设计呢? 项目出勤panel的内 ...

  5. FFmpeg详解

    认识FFMPEG FFMPEG堪称自由软件中最完备的一套多媒体支持库,它几乎实现了所有当下常见的数据封装格式.多媒体传输协议以及音视频编解码器.因此,对于从事多媒体技术开发的工程师来说,深入研究FFM ...

  6. SQL判断是否存在符合某条件的记录

    IF EXISTS ( --判断是否存在合符条件的记录 ) FROM [DCL].[SecurityUser] WHERE [UserAccount] = @UserAccount ) BEGIN - ...

  7. http常见的get请求方式和set请求方式。

    一.Get请求方式 以下是我写的一个用get请求方式获取api工厂中汇率的类. package com.example; import java.io.BufferedReader; import j ...

  8. bach cello

    http://bachlb.blog.163.com/blog/static/1819105120073275251223 一个偶然的机会,卡萨尔斯的父亲来巴塞罗那看卡萨尔斯,并且一起去逛了一间海边的 ...

  9. MVC 授权过滤器 AuthorizeAttribute

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  10. css3渐变详解

    今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...