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>