jquery +做CheckBoxList全选,反选
以前我们做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(index,domEle){ if(this.type=="checkbox") this.checked=true; });反选 $("#<%=CheckBoxList.ClientID %> input:checkbox").each(function(index,domEle){ 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);
});
});
}
})();