JS Full-Select function code optimization

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.