JS full selection function code optimization

JS full selection function code optimization

Recently looking at JavaScript MVC that book, also feel that their own writing code is not elegant, so have been thinking of another mode to write JS code, so for the previous simple JS full selection function to do a simple demo, using the current encoding method to recoding, Of course you will always write your own code in this way. Here is the following code:

JS All code:


/**
* JS Full selection
* @class Checkall
* @param {Object} cfg
* @param {Elementselector} [Cfg.container] limited-select containers
* @param {selector} cfg.checkall full selection box
* @param {Selector} Cfg.checkitem sub-selection 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) {
$ (E.target). Trigger (' Checkallchange ');
});

Radio Custom Events
This.container.delegate (Cfg.checkitem, ' Change ', function (e) {
$ (E.target). Trigger (' Checkitemchange ');
});

Select all operations
This.container.delegate (Cfg.checkall, ' Checkallchange ', function (e) {

var checked = self.isitemchecked (e.target);

Self._checkall (checked);

Select All child nodes
self._allchildrenchecked (checked);

Callback && $.isfunction (callback) && callback (self);
});

Radio 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 individual checkbox
* @param Item
* @param _ischeck
*/
_checkitem:function (item, _ischeck) {
Item = $ (item);
Item.prop (' checked ', _ischeck);
},
/*
* Select/deselect all 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/Reverse 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);
}
});
},
/*
* Whether all of the child nodes are 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 if an element is selected
*/
Isitemchecked:function (item) {
return $ (item). Is (": checked");
},
/*
* Get all selected values or attributes to be stored in an array
* @todo such as to get the ID of all items selected or the attributes of all other items
* @method getValues {public}
* @param {elems,attr} element all DOM nodes get the corresponding attribute values of the element
* @return 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;
}
});



The HTML code is as follows:

Basic Use

all

• check


• check


• check

JS initialization is as follows:


var checkall= new Checkall ({
Container: '. J_checklistcontainerbasic ',
Checkall: '. J_checkall ',
Checkitem: '. J_checkitem '
},function () {
Console.log (checkall.getvalues) ('. J_checkitem ', "value"));
});



Of course, in order to view the effect, I also provided a Jsfiddler address for preview:

JS Full selection Feature Demo