Skip to content

Commit

Permalink
- add reverse method
Browse files Browse the repository at this point in the history
  • Loading branch information
@ekoz
ekoz committed Jun 3, 2017
1 parent f654b77 commit ce71226
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 20 deletions.
15 changes: 10 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,26 @@ Checkbox/Radio 插件
=================================================
用于自定义checkbox/radio样式，支持IE8+，chrome，firefox

使用方法
引入
-------------------------------------------------
该插件依赖于 [jquery](http://jquery.com/)

<script src="../js/jquery.kbase.checkbox.js" type="text/javascript"></script>

初始化
用法
--------------------------------------------------
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
--------------------------------------------------
Expand Down
47 changes: 37 additions & 10 deletions example/checkbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,28 @@
</head>

<body>
<input name="opt" type="checkbox" value="1" alt="Apple" _kbs-resid="apple">苹果
<input name="opt" type="checkbox" value="2">葡萄
<input name="opt" type="checkbox" value="3" text="梨子">
<input name="opt" type="checkbox" value="4">
<button id="btnCheckbox">查看选中的结果</button>
<div id="checkboxPanel">
<input name="opt" type="checkbox" value="1" alt="Apple" _kbs-resid="apple">苹果
<input name="opt" type="checkbox" value="2">葡萄
<input name="opt" type="checkbox" value="3" text="梨子">
<input name="opt" type="checkbox" value="4" onclick="alert('Hello World!');">单击我弹出信息
</div>
<input type="radio" name="funcName" id="btnSelAll" value="1">全选
<input type="radio" name="funcName" id="btnUnselAll" value="2">全不选
<input type="button" id="btnReverse" value="反选">
<br>
<input type="radio" name="Fruit" value="1" alt="Apple" _kbs-resid="apple">苹果
<input type="radio" name="Fruit" value="2" text="葡萄">
<input type="radio" name="Fruit" value="3" text="梨子">
<button id="btnRadio">查看选中的结果</button>
<input type="button" id="btnCheck" value="选中"> 值为
<input type="text" id="optVal" size="10" style="border:0px;border-bottom:1px solid #F0F0F0;" title="多值用西文逗号分隔，可输入1,2,3,4"> 的项
<br>
<input type="checkbox" id="btnSelAll" value="">全选/全不选
<button id="btnCheckbox">查看选中的结果</button>
<hr/>
<div id="radioPanel">
<input type="radio" name="Fruit" value="1" alt="Apple" _kbs-resid="apple">苹果
<input type="radio" name="Fruit" value="2" text="葡萄">
<input type="radio" name="Fruit" value="3" text="梨子">
</div>
<button id="btnRadio">查看选中的结果</button>

<hr/>
<div id="resultPanel" style="font-size: 12px;color:#0090ff;"></div>

Expand All @@ -28,6 +38,7 @@
$(':checkbox').kbsElem();
$(':radio').kbsElem();
$('#btnRadio').kbsElem(); //不会做初始化
//Checkbox 查看选中结果
$('#btnCheckbox').click(function(){
//console.log($(':checkbox:checked'));
$('#resultPanel').empty();
Expand All @@ -36,6 +47,7 @@
$('#resultPanel').append('[text]' + $(item).attr('text') + ' [value]' + $(item).val() + '<br>');
});
});
//Radio 查看选中结果
$('#btnRadio').click(function(){
//console.log($(':radio:checked'));
$('#resultPanel').empty();
Expand All @@ -45,9 +57,24 @@
$('#resultPanel').append('[text]' + $(item).attr('text') + ' [value]' +$(item).val() + '<br>');
}
});
//全选
$('#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);
});
</script>
</body>
</html>
66 changes: 61 additions & 5 deletions js/jquery.kbase.checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -92,6 +94,7 @@
_kbsCheckboxText.innerText = _text;
_kbsCheckboxLabel.appendChild(_kbsCheckboxIcon);
_kbsCheckboxLabel.appendChild(_kbsCheckboxText);
_kbsCheckboxLabel.appendChild(_kbsCheckboxClear);
_kbsCheckboxItem.appendChild(_kbsCheckboxLabel)

$(_this).after(_kbsCheckboxItem);
Expand Down Expand Up @@ -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'){
Expand All @@ -141,14 +180,26 @@
});
},
//全部不选
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');
$(_kbsCheckboxItem).removeAttr('checked');
$(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);
Expand All @@ -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);

0 comments on commit ce71226

Please sign in to comment.