diff --git a/README.md b/README.md index e01086c..4efce09 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,26 @@ Checkbox/Radio 插件 ================================================= 用于自定义checkbox/radio样式，支持IE8+，chrome，firefox -使用方法 +引入 ------------------------------------------------- 该插件依赖于 [jquery](http://jquery.com/) -初始化 +用法 -------------------------------------------------- Dom加载完毕后调用 $(selector).kbsElem(); 控件只会初始化type=checkbox 和 type=radio 的元素 $(':checkbox').kbsElem(); $(':radio').kbsElem(); - $('#btnRadio').kbsElem(); //不会做初始化 - - $('input[name="opt"]').kbsElem('checked'); //选中/不选中 + $('#btnRadio').kbsElem(); //不会重复做初始化 + + $('input[name="opt"]').kbsElem('checkAll'); //全部选中 + $('input[name="opt"]').kbsElem('uncheckAll'); //全部不选中 + $('input[name="opt"]').kbsElem('checked', 'Apple'); //选中值为 Apple 的项 + $('input[name="opt"]').kbsElem('checked', 'Apple,Orange'); //选中值为 Apple 和 Orange 的项 + $('input[name="opt"]').kbsElem('unchecked', 'Orange'); //不选中值为 Orange 的项 + $('input[name="opt"]').kbsElem('reverse'); //反选 Demo -------------------------------------------------- diff --git a/example/checkbox.html b/example/checkbox.html index 3b18694..1e79811 100644 --- a/example/checkbox.html +++ b/example/checkbox.html @@ -8,18 +8,28 @@ - 苹果 - 葡萄 - - - +
+ 苹果 + 葡萄 + + 单击我弹出信息 +
+ 全选 + 全不选 +
- 苹果 - - - + 值为 + 的项
- 全选/全不选 + +
+
+ 苹果 + + +
+ +
@@ -28,6 +38,7 @@ $(':checkbox').kbsElem(); $(':radio').kbsElem(); $('#btnRadio').kbsElem(); //不会做初始化 + //Checkbox 查看选中结果 $('#btnCheckbox').click(function(){ //console.log($(':checkbox:checked')); $('#resultPanel').empty(); @@ -36,6 +47,7 @@ $('#resultPanel').append('[text]' + $(item).attr('text') + ' [value]' + $(item).val() + '
'); }); }); + //Radio 查看选中结果 $('#btnRadio').click(function(){ //console.log($(':radio:checked')); $('#resultPanel').empty(); @@ -45,9 +57,24 @@ $('#resultPanel').append('[text]' + $(item).attr('text') + ' [value]' +$(item).val() + '
'); } }); + //全选 $('#btnSelAll').click(function(){ $('input[name="opt"]').kbsElem('checked'); }); + //全不选 + $('#btnUnselAll').click(function(){ + $('input[name="opt"]').kbsElem('unchecked'); + }); + //反选 + $('#btnReverse').click(function(){ + $('input[name="opt"]').kbsElem('reverse'); + }); + //选中 + $('#btnCheck').click(function(){ + $('#btnUnselAll').click(); + var val = $('#optVal').val(); + $('input[name="opt"]').kbsElem('checked', val); + }); \ No newline at end of file diff --git a/js/jquery.kbase.checkbox.js b/js/jquery.kbase.checkbox.js index 8966345..1434562 100644 --- a/js/jquery.kbase.checkbox.js +++ b/js/jquery.kbase.checkbox.js @@ -64,6 +64,8 @@ _kbsCheckboxIcon.setAttribute('class', 'kbs-' + _type + '-icon'); var _kbsCheckboxText = document.createElement('em'); _kbsCheckboxText.setAttribute('class', 'kbs-' + _type + '-text'); + var _kbsCheckboxClear = document.createElement('span'); + _kbsCheckboxClear.setAttribute('style', 'float:none;clear:both;'); //将input元素的属性复制到label @@ -92,6 +94,7 @@ _kbsCheckboxText.innerText = _text; _kbsCheckboxLabel.appendChild(_kbsCheckboxIcon); _kbsCheckboxLabel.appendChild(_kbsCheckboxText); + _kbsCheckboxLabel.appendChild(_kbsCheckboxClear); _kbsCheckboxItem.appendChild(_kbsCheckboxLabel) $(_this).after(_kbsCheckboxItem); @@ -127,8 +130,44 @@ }); return _thisArr; }, + //选中指定的项 + checked: function(elem, opts){ + if (opts==null){ + this.checkAll(elem); + }else{ + var idArr = opts.split(','); + $(idArr).each(function(i, id){ + var item = $('span[value="' + id + '"]'); + if ($(item).attr('type')=='radio'){ + $('.kbs-radio-item[name="' + $(item).attr('name') + '"]').children('.on').removeClass('on'); + } + var _kbsCheckboxItem = $('span[name="' + $(item).attr('name') + '"][value="' + $(item).attr('value') + '"]'); + $(_kbsCheckboxItem).children('label').addClass('on'); + $(_kbsCheckboxItem).attr('checked', 'checked'); + $('input[name="' + $(item).attr('name') + '"][value="' + $(item).attr('value') + '"]').prop('checked', true); + }); + } + }, + //不选中指定的项 + unchecked: function(elem, opts){ + if (opts==null){ + this.uncheckAll(elem); + }else{ + var idArr = opts.split(','); + $(idArr).each(function(i, id){ + var item = $('span[value="' + id + '"]'); + if ($(item).attr('type')=='radio'){ + $('.kbs-radio-item[name="' + $(item).attr('name') + '"]').children('.on').removeClass('on'); + } + var _kbsCheckboxItem = $('span[name="' + $(item).attr('name') + '"][value="' + $(item).attr('value') + '"]'); + $(_kbsCheckboxItem).children('label').removeClass('on'); + $(_kbsCheckboxItem).removeAttr('checked'); + $('input[name="' + $(item).attr('name') + '"][value="' + $(item).attr('value') + '"]').removeProp('checked'); + }); + } + }, //全部选中 - checked: function(elem){ + checkAll: function(elem){ $(elem).each(function(i, item){ //$('span[name="' + $(item).attr('name') + '"][value="' + $(item).attr('value') + '"]').click(); if ($(item).attr('type')=='radio'){ @@ -141,7 +180,7 @@ }); }, //全部不选 - unchecked: function(elem){ + uncheckAll: function(elem){ $(elem).each(function(i, item){ var _kbsCheckboxItem = $('span[name="' + $(item).attr('name') + '"][value="' + $(item).attr('value') + '"]'); $(_kbsCheckboxItem).children('label').removeClass('on'); @@ -149,6 +188,18 @@ $(item).removeProp('checked'); }); }, + //反选 + reverse: function(elem){ + var _this = this; + $(elem).each(function(i, item){ + var _kbsCheckboxItem = $('span[name="' + $(item).attr('name') + '"][value="' + $(item).attr('value') + '"]'); + if ($(item).prop('checked')==true){ + _this.unchecked(elem, $(item).attr('value')); + }else{ + _this.checked(elem, $(item).attr('value')); + } + }); + }, debug: function(o){ if (window.console && window.console.log){ console.log(o); @@ -166,15 +217,20 @@ } $.fn.extend({ - kbsElem: function(key){ + kbsElem: function(key, opts){ var _this = this; if (key==undefined || typeof key!='string'){ builder.init(_this); }else{ - builder.fire(key, _this); + //判断控件是否初始化，如果未初始化，先初始化控件 + var item = $('span[name="' + $(_this).attr('name') + '"][value="' + $(_this).attr('value') + '"]'); + if (item.length==0){ + builder.init(_this); + } + builder.fire(key, _this, opts); } } }); builder.run(); -})(jQuery); +})(jQuery); \ No newline at end of file