欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery实现多选框的全选按钮自动选中与消失

程序员文章站 2022-07-13 23:05:03
...

页面中实现全选,反选,一组复选框选中时全选按钮自动选中,一组中有一个未选中时全选按钮取消

$('#checkAll').click(function(){  
            if(this.checked) {  
                $("input[type=checkbox][name=ckjsmc]").each(function(){  
                    $(this).attr('checked', 'true');  
                });  
            } else {  
                $("input[type=checkbox][name=ckjsmc]").each(function(){  
                    $(this).removeAttr('checked');  
                });  
            }  
        });  
          
     function checkOne(){  
        var count = 0;  
        $("input[type=checkbox][name=ckjsmc]").each(function(){  
            if($(this).attr('checked') != 'checked'){// 判断一组复选框是否有未选中的  
                count+=1;  
            }  
        });  
        if(count == 0) { // 如果没有未选中的那么全选框被选中  
            $('#checkAll').attr('checked', 'true');  
        } else {  
            $('#checkAll').removeAttr('checked');  
        }  
     }  


这里是checkOne()是在每个复选框的onclick方法中调用的, 由于我这里的一组复选框是动态用jquery拼接车来的, 所以不能用jquery的方式$().click()来注册点击事件(经多次测试用jquery注册不得行, 点击无任何反应), 这里就必须将方法在拼接的js中使用onclick来调用方法.


此例子可以实现: 1. 选中全选框时,一组复选框被选中

                           2. 反选全选框时,一组复选框都不被选中

                           3. 一组复选框中都选中时, 自动勾选全选框

                           4. 一组复选框中有一个未被选中时, 全选框勾去除


*本文章装载自 跌跌撞撞的小时代 的博客