SOURCE

console 命令行工具 X clear

                    
>
console
/**
 * 复选框组 可以限制选多少个复选框
 * @param  {HTMLCollection} elements        DOM节点
 * @param  {Object}         opt             选项
 * 	                        opt.minChecked  最小允许选中多少个复选框
 * 	                        opt.minChecked  最大允许选中多少个复选框
 */
var CheckboxGroup = (function() {
    function CheckboxGroup(elements, opt) {
        var elementsType = Object.prototype.toString.call((elements));
        this.$elements = elementsType === '[object HTMLCollection]' ? elements: elementsType === '[object HTMLInputElement]' ? [elements] : [];
        var option = typeof opt === 'object' ? opt: {};
        this._minChecked = typeof option.minChecked !== 'number' ? 0 : option.minChecked > this.$elements.length ? this.$elements.length: option.minChecked < 0 ? 0 : option.minChecked;
        this._maxChecked = typeof option.maxChecked !== 'number' ? this.$elements.length: option.maxChecked > this.$elements.length ? this.$elements.length: option.maxChecked < this._minChecked ? this._minChecked: option.maxChecked;
        this._onChange = typeof option.onChange === 'function' ? option.onChange: null;
        this.$checkedNum = 0;
        this.$checkeds = [];
        for (var i = 0; i < this.$elements.length; i++) {
            var element = this.$elements[i];
            var bindData = {
                index: i,
                element: element,
                value: {
                    value: element.getAttribute('value'),
                    checked: element.checked
                },
                self: this
            }
            this.$checkeds.push(bindData.value);
            if (bindData.element.checked) {
                this.$checkedNum += 1;
            }
            bindData.element.addEventListener('change', this._checkboxOnChange.bind(bindData));
        }
        if (this.$checkedNum < this._minChecked) {
            var difference = this._minChecked - this.$checkedNum;
            for (var i = 0; i < this.$elements.length; i++) {
                if (difference === 0) {
                    break;
                }
                if (!this.$elements[i].checked) {
                    this.$elements[i].checked = true;
                    difference -= 1;
                }
            }
        } else if (this.$checkedNum > this._maxChecked) {
            var difference = this.$checkedNum - this._maxChecked;
            for (var i = this.$elements.length - 1; i >= 0; i--) {
                if (difference === 0) {
                    break;
                }
                if (this.$elements[i].checked) {
                    this.$elements[i].checked = false;
                    difference -= 1;
                }
            }
        }
        this._update();
		this._onChange && this._onChange();
    };
    CheckboxGroup.prototype._update = function() {
        this.$checkedNum = 0;
        for (var i = 0; i < this.$elements.length; i++) {
            var element = this.$elements[i];
            this.$checkeds[i].checked = element.checked;
            element.disabled = false;
            if (element.checked === true) {
                this.$checkedNum += 1;
            }
        }
        if (this.$checkedNum >= this._maxChecked) {
            for (var i = 0; i < this.$elements.length; i++) {
                var element = this.$elements[i];
                if (element.checked === false) {
                    element.disabled = true;
                }
            }
        }
    };
    CheckboxGroup.prototype._checkboxOnChange = function(event) {
        event && event.stopPropagation();
        var self = this.self;
        var element = this.element;
        var value = this.value;
        self._update();
        if (self.$checkedNum < self._minChecked) {
            element.checked = !element.checked;
            value.checked = !value.checked;
            self.$checkedNum += 1;
        } else if (self.$checkedNum > self._maxChecked) {
            element.checked = !element.checked;
            value.checked = !value.checked;
            self.$checkedNum -= 1;
        }
        self._onChange && self._onChange();
    };
    CheckboxGroup.prototype.value = function() {
        var values = [];
        for (var i = 0; i < this.$checkeds.length; i++) {
            if (this.$checkeds[i].checked) {
                values.push(this.$checkeds[i].value);
            }
        }
        return values;
    };
    return CheckboxGroup;
})();
<h3>必须选择一个,最多选择3个</h3>
<ul>
	<li>
		<input class="checkbox-group" type="checkbox" value="1" checked>
		<span>value: 1</span>
	</li>
	<li>
		<input class="checkbox-group" type="checkbox" value="2" checked>
		<span>value: 2</span>
	</li>
	<li>
		<input class="checkbox-group" type="checkbox" value="3">
		<span>value: 3</span>
	</li>
	<li>
		<input class="checkbox-group" type="checkbox" value="4">
		<span>value: 4</span>
	</li>
</ul>
<p>
	当前选择value:<span id="value"></span>
</p>
<script type="text/javascript">
    var checkboxGroup = new CheckboxGroup(document.getElementsByClassName('checkbox-group'), {
        minChecked: 1,
        maxChecked: 3,
        onChange: function() {
            document.getElementById('value').innerHTML = this.value();
        }
    });
</script>