全选功能

checkall.js

/**
 * CheckSyncor
 * @param {HTMLElement} trigger  全选触发器
 * @param {HTMLCollection} checkbox checkox 的 DOM 集合
 */
function CheckSyncor(trigger, checkbox) {
	this.trigger = trigger;
	this.checkbox = checkbox;
	this.length = checkbox.length;

	this.bind_event(this.trigger, true);
	if (this.length > 1) {
		for (var i = 0; i < this.length; i++) {
			this.bind_event(this.checkbox[i]);
		}
	}
}

CheckSyncor.prototype.bind_event = function(el, flag) {
	var _this = this;

	el.onchange = function () {
		_this._helper.call(_this, flag);
	};
};

CheckSyncor.prototype._helper = function(sync) {
	for (var i = 0; i < this.length; i++) {
		if (sync) {
			this.checkbox[i].checked = this.trigger.checked;
		} else if (!this.checkbox[i].checked) {
			break;
		}
	}

	if (!sync) {
		return this.trigger.checked = !(i < this.length);
	}
};

var checkbox = document.getElementsByName('data');
var checkall = document.getElementById('checkall');
var checksyncor = new CheckSyncor(checkall, checkbox);

checkbox.html

<ul>
	<li><label><input type="checkbox" id="checkall" />全选</label></li>
	<li><label><input type="checkbox" name="data" />1</label></li>
	<li><label><input type="checkbox" name="data" />2</label></li>
	<li><label><input type="checkbox" name="data" />3</label></li>
	<li><label><input type="checkbox" name="data" />4</label></li>
	<li><label><input type="checkbox" name="data" />5</label></li>
	<li><label><input type="checkbox" name="data" />6</label></li>
	<li><label><input type="checkbox" name="data" />7</label></li>
	<li><label><input type="checkbox" name="data" />8</label></li>
</ul>