Recently, I was reading the javascript MVC book and felt that the code I wrote was not elegant. So I have been trying to write javascript code in another mode, therefore, we can make a simple demo for the simple JS all-selection function and recode it using the current encoding method. Of course, we will always use this method to write our own code in the future. Below is the following code: All JS Code: copy the code/*** select all JS * @ class Checkall * @ param {Object} cfg * @ param {Element | selector} [cfg. container] restrict all selected containers * @ param {selector} cfg. checkAll select all box * @ param {selector} cfg. checkItem subselection box */function CheckAll (cfg, callback) {var self = this; this. config = cfg; this. container = $ (cfg. container) | document. body; // select all custom events this. container. delegate (cfg. checkAll, 'change', function (e) {separator (e.tar Get ). trigger ('checkallchange');}); // single-choice custom event this. container. delegate (cfg. checkItem, 'change', function (e) {condition (e.tar get ). trigger ('checkitemchang');}); // select all operations this. container. delegate (cfg. checkAll, 'checkallchang', function (e) {var checked = self.isItemChecked(e.tar get); self. _ checkAll (checked); // select all subnodes self. _ AllChildrenChecked (checked); callback & $. isFunction (callback) & callback (self );});/ /Single-choice operation this. container. delegate (cfg. checkItem, 'checkitemchang', function (e) {// check whether all subnodes have selected if (self. _ isChildrenChecked () {self. _ checkAll (true);} else {self. _ checkAll (false);} callback & $. isFunction (callback) & callback (self. extend (CheckAll. prototype, {/** select a single checkbox * @ param item * @ param _ isCheck */_ checkItem: function (item, _ isCheck) {item =$ (item); item. prop ('checked ', _ IsCheck) ;},/** select/reselect all the selection buttons * @ method _ checkAll {private} * @ param {Boolean} _ isCheck */_ checkAll: function (_ isCheck) {var self = this; this. container. find (self. config. checkAll ). each (function (index, item) {var isAllChecked = self. isItemChecked (item); if (isAllChecked! ==_Ischeck) {self. _ checkItem (item, _ isCheck) ;}}) ;},/** select/invert all child nodes * @ method _ AllChildrenChecked {private} */_ AllChildrenChecked: function (_ isCheck) {var self = this; this. container. find (this. config. checkItem ). each (function (index, item) {var itemChecked = self. isItemChecked (item); if (itemChecked! ==_Ischeck) {self. _ checkItem (item, _ isCheck) ;}}) ;},/** indicates whether all child nodes have been selected */_ isChildrenChecked: function () {var isCheckAll = true; var self = this; this. container. find (this. config. checkItem ). each (function (index, item) {if (! Self. isItemChecked (item) {isCheckAll = false ;}}); return isCheckAll ;},/** check whether an element is selected */isItemChecked: function (item) {return $ (item ). is (": checked ");}, /** obtain all selected values or attributes and store them in an array * @ todo. For example, to obtain the id of all selected items or the attributes of all other items, perform the following operations: * @ method getValues {public }* @ param {elems, all dom nodes of the attr} element get the attribute value corresponding to the element * @ return Array {rets} */getValues: function (elems, attr) {var self = this, rets = []; $ (elems ). each (function (index, item) {var isboolean = self. isItemChecked (item); if (isboolean & $ (item ). prop (attr) {var curAttr = $ (item ). prop (attr); rets. push (curAttr) ;}}); return rets ;}}); copy the following HTML code: copy the Code <div class = "check-list">