注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

{'coding': 'life'}

          I want to be a geek

 
 
 

日志

 
 
 
 

jquery checkBoxGroup插件  

2011-06-30 13:45:50|  分类: 前端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
经常要用到下面的这种checkBox的全选操作,所以checkBoxGroup就是用来,做由一个checkBox控制选中一组checkbox的操作的
jquery checkBoxGroup插件 - Apple Green - Apple Green
1. 代码如下:
(function($){
    $.fn.checkboxGroup = function(options){
        var settings = $.extend({
            groupName:"group_name",
            groupSelector:"",
            enabledOnly:false
        },options||{});
        /**控制checkBox*/
        var ctrl_box = this;
        
        var grp_slctr = (settings.groupSelector =="")?"input[name=" + settings.groupName + "]":settings.groupSelector
        /**直选中可用的checkbox*/
        if (settings.enableOnly) {
            grp_slctr+=":enabled";
        }
        ctrl_box.click(function(event){
            var e  = event || window.event;
            chk_val = e.target.checked;
            $(grp_slctr).attr("checked", chk_val);
            $(ctrl_box).attr("checked", chk_val);
        });
/**单个checkbox的click事件*/
        $(grp_slctr).click(function(){
    /**若果checkbox组中有一个被取消选中,则取消ctrl_box的选中*/
            if (!this.checked) {
                $(ctrl_box).attr("checked", false);
            } else {
                if ($(grp_slctr).size() == $(grp_slctr+ ":checked").size() ) {
                    $(ctrl_box).attr("checked", true);
                }
            }
        });
        return this;  
    }
})(jQuery)

2.用法:
<input class='groupclass' name='group' type='checkbox'>chk1<br> 
<input class='groupclass' name='group' type='checkbox'>chk2<br> 
<input class='groupclass' name='group' type='checkbox'>chk3<br> 
<input class='groupclass' name='group' type='checkbox'>chk4<br> 
<input type='checkbox' class='checkall' id="checkall"> 
$(function(){
$("#checkall").checkboxGroup ({
            groupName:"group",
            groupSelector:"",
            enabledOnly: true
        })
})
  评论这张
 
阅读(411)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018