何泽弘

何泽弘的博客

这是一个中二半吊子码农分享学习经验和生活的网站...

复选框组,可以限制选多少个复选框,为复选框添加value


说明

new checkboxGroup(HTMLCollection, option)

复选框组,可以限制选多少个复选框,为复选框添加value。

参数

Name Type Description
elements HTMLCollection DOM节点
option object 选项
option.minChecked boolean 最小允许选中多少个复选框
option.minChecked any 最大允许选中多少个复选框

简单例子

HTML

<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>

JAVASCRIPT

var checkboxGroup = new CheckboxGroup(document.getElementsByClassName('checkbox-group'), {
    minChecked: 1,
    maxChecked: 3,
    onChange: function() {
        document.getElementById('value').innerHTML = this.value();
    }
});

DEMO

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的