JQuery CheckBoxList 全选 反选
2011-11-23 16:41 假面Wilson 阅读(662) 评论(1) 编辑 收藏 举报以前我们做CheckBoxList全选,反选,一般用Aspx+CodeFile、或者用JavaScript
现在我们可以用JQuery来帮我Easy Choose.
这里我来写三种:
第一种
全选
$(".checkBoxSelect").each(function() {
$(this).attr("checked", true);
});反选
$(".checkBoxSelect").each(function() {
if($(this).attr("checked"))
{
$(this).attr("checked", false);
}
else
{
$(this).attr("checked", true);
}
});
第二种
全选
$("#<%=CheckBoxList.ClientID %> input:checkbox").each(function(){if(this.type=="checkbox")this.checked=true;});
反选$("#<%=CheckBoxList.ClientID %> input:checkbox").each(function(){if(this.type=="checkbox")this.checked=!this.checked;});
第三种
使用toggle方式进行全选、反选
btnSelAll.click(function() {
jqClass.toggleChecks(null);
});
var jqClass= {
//Toggle Item For CheckBoxList
toggleChecks: function(b) {
$("#<%=cblContact.ClientID %> input[type=checkbox]").each(function() {
if (typeof this.checked != "undefined") {
if (b == null)
this.checked = (!this.checked);
else
this.checked = b;
}
});
}
}
第四种:Plugin 方式
(function($$) {
$.fn.jCheckboxList = function(opt) {
var option = {
root: '', // checkbox id of "select all"
childCls: '' // another checkboxs
};
var opt = $.extend({}, option, opt);
var el = $(this).attr('id');
var allchild = "#" + el + " :input[type=checkbox]." + opt.childCls;
$("#" + opt.root).click(function() {
var isChecked = $(this).attr('checked');
if (isChecked)
$(allchild).attr('checked', true);
else
$(allchild).attr('checked', false);
});
$.each($(allchild), function(i, v) {
var all = $(allchild).length;
$(v).click(function() {
var count = $(allchild + "[checked]").length;
if (count == all)
$("#" + opt.root).attr('checked', true);
else
$("#" + opt.root).attr('checked', false);
});
});
}
})();