以前我們做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);
??????????? });
??????? });
??? }
})();

?

轉載于:https://www.cnblogs.com/xiachufeng/archive/2010/10/23/1859479.html

總結

以上是生活随笔為你收集整理的jquery +做CheckBoxList全选，反选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。