用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. ubuntu中文实训手册

    http://people.ubuntu.com/~happyaron/udc-cn/lucid-html/ http://www.apachefriends.org/zh_cn/xampp-linu ...

  2. 忘记root密码修改方法

    好吧,不想重新装(那耗费的时间真心伤不起…),找修改root密码的方法,结果还真找到了… 首先在虚拟机启动时,在Grub界面按“e”进入编辑 在linux /vmlinuz那行后面添加“init=/b ...

  3. LFS：kernel panic VFS: Unable to mount root fs

    说明: 使用Vm虚拟机构建自己的LFS系统时,系统引导不成功,提示 kernel panic VFS: Unable to mount root fs 参考链接:http://www.52os.net ...

  4. sql 中的时间处理问题

    select GETDATE() as '当前日期',DateName(year,GetDate()) as '年',DateName(month,GetDate()) as '月',DateName ...

  5. iOS 使用自定义的字体

    一.新建一个工程,准备好要使用的字体,后缀为.ttf或者.otf格式. 二.将字体直接拖入工程项目中. 三.在Info.plist中添加一个新的Key:Fonts provided by applic ...

  6. B - Maya Calendar（第二季水）

    Description During his last sabbatical, professor M. A. Ya made a surprising discovery about the old ...

  7. C++ 析构函数为虚函数

    1.原因: 在实现多态时, 当用基类指针操作派生类, 在析构时候防止只析构基类而不析构派生类. 2.例子: (1). #include<iostream> using namespace ...

  8. 奇葩问题：spring+mybaits项目突然出现其中一些Mapper类找不到

    一.问题现象 1,No bean named 'bomManageMapper' found in org.springframework.beans.factory.support.DefaultL ...

  9. Android TextView 字符串展示不同大小文字

    用Spannable字符串实现: String s= "Hello Everyone"; SpannableString ss1= new SpannableString(s); ...

  10. struts2_20140720

    有这样的感觉:前面学的东西弄会了,过了一段时间又感觉陌生了,还要重新开始.这次想个好办法,把写的程序用博客记录下来,把自己的学历历程用博客的形式呈现出来,一来可以方便复习,而来可以以后开发程序可以快速 ...