Original: JS full-select function code optimization
JS Full-Select function code optimization
Recently in the JavaScript MVC book, also feel that the code is not elegant, so I have been trying to use another mode to write the JS code, so for the previous simple JS full-select function to do a simple demo, using the current encoding method to re-encode, Of course you will always write your own code in this way. Here is the following code:
JS All code:
/** JS Select all * @class Checkall * @param {Object} cfg * @param {element|selector} [Cfg.container] to restrict all containers * @param {Selecto R} Cfg.checkall All marquee * @param {selector} Cfg.checkitem sub -Marquee*/ functionCheckall (cfg,callback) {varSelf = This; This. config =CFG; This. Container = $ (cfg.container) | |document.body; //Select all custom Events This. Container.delegate (Cfg.checkall, ' Change ',function(e) {$ (e.target). Trigger (' Checkallchange '); }); //single-Selection custom events This. Container.delegate (Cfg.checkitem, ' Change ',function(e) {$ (e.target). Trigger (' Checkitemchange '); }); //Select all Operation This. Container.delegate (Cfg.checkall, ' Checkallchange ',function(e) {varChecked =self.isitemchecked (E.target); Self._checkall (checked); //Select all child nodesself._allchildrenchecked (checked); Callback&& $.isfunction (callback) &&callback (self); }); //single-selection operation This. Container.delegate (Cfg.checkitem, ' Checkitemchange ',function(e) {//Check if all child nodes are 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/deselect all all Select buttons * @method _checkall {Private} * @param {Boolean} _ischeck*/_checkall:function(_ischeck) {varSelf = This; This. Container.find (SELF.CONFIG.CHECKALL). each (function(index,item) {varisallchecked =self.isitemchecked (item); if(Isallchecked!==_ischeck) {Self._checkitem (Item,_ischeck); } }); }, /** Select/deselect all sub-nodes * @method _allchildrenchecked {private}*/_allchildrenchecked:function(_ischeck) {varSelf = This; This. Container.find ( This. Config.checkitem). each (function(index,item) {varitemchecked =self.isitemchecked (item); if(Itemchecked!==_ischeck) {Self._checkitem (item, _ischeck); } }); }, /** If all the child nodes are selected*/_ischildrenchecked:function(){ varIscheckall =true; varSelf = This; This. Container.find ( This. Config.checkitem). each (function(index,item) {if(!self.isitemchecked (item)) {Ischeckall=false; } }); returnIscheckall; }, /** Check if an element is selected*/isitemchecked:function(item) {return$ (item). Is (": Checked"); }, /** Get all selected values or attributes into an array * @todo such as to get the ID of all items selected or the properties of all other items * @method getValues {public} * @param {elems,attr} element all DOM nodes get attribute value corresponding to element * @return return array {rets}*/getValues:function(elems,attr) {varSelf = This, RETs= []; $ (Elems). each (function(index,item) {varIsboolean =self.isitemchecked (item); if(Isboolean &&$ (item). Prop (attr)) { varCurattr =$ (item). Prop (attr); Rets.push (CURATTR); } }); returnRETs; } });
The HTML code is as follows:
<Divclass= "Check-list"> <HR> <Divclass= "J_checklistcontainerbasic"> <h4>Basic use</h4> <Divclass= "Check-all"> <label>Select All<inputtype= "checkbox"class= "J_checkall"></label> <ulclass= "Sub-checkbox"> <Li><label>Selected<inputtype= "checkbox"class= "J_checkitem"value= "1"></label></Li> <Li><label>Selected<inputtype= "checkbox"class= "J_checkitem"value= "2"></label></Li> <Li><label>Selected<inputtype= "checkbox"class= "J_checkitem"value= "3"></label></Li> </ul> </Div> </Div></Div>
JS initialization is as follows:
var checkall= new checkall ({ '. J_checklistcontainerbasic ', '. J_checkall ', '. J_checkitem ' },function() { console.log('. Checkall.getvalues ('. J_checkitem ', "value"); });
Of course, in order to see the effect, I also provided a Jsfiddler address for preview:
JS Full Select function Demo