最前端

我的工作,我的生活,点点滴滴...

归档: ‘ 2009 年十月

模拟checkbox

通过label+checkbox模拟checkbox

  1. 使用label包裹checkbox实现
  2. IE6下,label设置for值时,才能触发checkbox
  3. IE6下,不能设置checkbox为display:none或者visibility:hidden,否则不能触发checkbox

代码:

    ;(function(){
        var simCheckbox = function(wrap, cb) {
            this.init(wrap, cb);
        };
        simCheckbox.prototype = {
            init: function(wrap, cb) {
                var self = this;
                var id = 'checkbox_' + Math.abs((new Date()).getTime()) + '_' + Math.round(Math.random() * 1e8);
                self.wrap = wrap;
                self.cb = cb || function() {};
                self.checkbox = wrap.getElementsByTagName('input')[0];
                self.checkbox.id = id;
                self.wrap.htmlFor = id;
                self.clz = wrap.className;
                self.checked = false;
                self.toggle().bind();
            },
            toggle: function() {
                var self = this;
                var checked = self.checkbox.checked;
                var newClz = checked ? self.clz + ' checked' : self.clz;
                self.wrap.className = newClz;
                self.checked = checked;
                typeof self.cb == 'function' && self.cb(checked);
                return self;
            },
            bind: function() {
                var self = this;
                self.wrap.onclick = function() {
                    self.toggle();
                };
                return self;
            }
        };
    })();