模拟checkbox
通过label+checkbox模拟checkbox
- 使用label包裹checkbox实现
- IE6下,label设置for值时,才能触发checkbox
- 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; } }; })(); |
近期评论