用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. SQL Server 2008 忘记sa密码的解决办法

    由于某些原因,sa和windows验证都不能登录 sql server,可以用独占模式,修改sa密码先在服务管理器停止Sql Server服务,然后打开命令行,进入 SQL Server安装目录,进入 ...

  2. 自动匹配HTTP请求中对应实体参数名的数据（性能不是最优）

    /// <summary> /// 获取请求参数字段 /// </summary> /// <typeparam name="T"></t ...

  3. XPath语法 在C#中使用XPath示例

    XPath可以快速定位到Xml中的节点或者属性.XPath语法很简单,但是强大够用,它也是使用xslt的基础知识. 示例Xml: <?xml version="1.0" en ...

  4. RTMP流媒体播放过程(转)

    http://blog.csdn.net/leixiaohua1020/article/details/11704355 本文描述了从打开一个RTMP流媒体到视音频数据开始播放的全过程. 注意:RTM ...

  5. php工厂设计模式

    class DbFactory { private $errmsg = '未找到类文件'; static function factory($className){ $className = strt ...

  6. activity的生命周期详解

    刚在看mars老师的视频,看到activity的生命周期,就看了一下,总结了一下.下面是各函数的调用时机 为了更清楚的看清楚工作的具体过程,举例如下: ,建立两个activity,一个main,一个a ...

  7. jQuery的类数组对象结构

    Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...

  8. multiprocessing跨平台锁的使用（Windows问题）

    在Windows上可能遇到,开启的子进程不会关闭的问题 参考multiprocessing官方文档: Explicitly pass resources to child processes On U ...

  9. Oracle EBS-SQL (QA-1):检查超出检验周期的检验数据.sql

    select msi.segment1                                    物料编码,          msi.DESCRIPTION                ...

  10. Storm Esper

    https://github.com/hellojinjie https://github.com/tomdz/storm-esper https://github.com/jayway/awaiti ...