用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. Riak VClock

    Riak VClock 关于向量时钟的概念.在这里就多讲了,大家能够參照一下Dynamo的论文了解一下,向量时钟在分布式主要用于解决一致性性问题.能够和CRDTs一起看. 以下的源码是參照riak中的 ...

  2. 解决 jsp:include 引用文件时出现乱码的问题

    阐述问题前,先来看一下下面这张图片左侧iframe中的乱码页面: 这个就是让我纠结好一阵子的乱码截图: 这个乱码页面中是使用了<jsp:include>引用标签后出现了这个问题: 源码截图 ...

  3. 使用DBCC CHECKIDENT重置自增标识

    原来ID=8的记录删除后, 下一个Insert记录为9 当插入ID=10的记录后, 使用 ) 当再次Insert记录, 就会是ID为8. 不过以上不是真实的使用场景, 以上情况应该插入包含ID的记录就 ...

  4. USACO Chapter 1 解题总结

    USACO Chapter 1 解题总结 1.1.1 Your Ride Is Here 基本字符串操作,无压力. 1.1.2 Greedy Gift Givers 基础模拟题,弄明白题意,不怕麻烦, ...

  5. Notepad++编译c++时使用的代码

    cmd /c "g++ -o $(CURRENT_DIRECTORY)\$(NAME_PART).exe $(FULL_CURRENT_PATH)" 出现控制台.  NppExec ...

  6. 从汇编看c++成员函数指针(二)

    下面先看一段c++源码: #include <cstdio> using namespace std; class X { public: virtual int get1() { ; } ...

  7. Windows下安装PHP扩展及资源下载地址（memcached为例）

    官方下载的php安装包ext目录里以经包含了常用的php扩展,但某些情况下并不能满足我们项目需求,比如memcache扩展就不在官方的php安装包里.这时就需要我们自己去下载安装. 本文列出php官方 ...

  8. AngularJS 不得不了解的服务 $compile 用于动态显示html内容

    项目中一度纠结与AngularJS如何动态显示不同的html内容. 本来是希望直接使用下面的语句来实现: <div> </div> 但是很尴尬的是,这样不能识别出html标签, ...

  9. Android 桌面生成快捷方式

    Android生成桌面快捷方式的几种方法: //------------以下为动态替换桌面应用Icon的一种解决方案------------------- // 1.获取本地目录图片的Bitmap ; ...

  10. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...