选择组件_牛客题霸_牛客网

CheckGroup是一个选择组件类，支持单选和多选选项参数格式、调用方式以及效果如下选项参数格式：var options = [{text: '选项a', value: 'a'}, {text: '选项b', value: 'b'}, {text: '选项c', value: 'c'}, {text: '选项d', value: 'd'}];实例化单选组件：var item = new CheckGroup(document.getElementById('jsCheckGroup'), options);item.val(['a']);实例化多选组件：var item = new CheckGroup(document.getElementById('jsCheckGroup'), options, true);item.val(['a']);具体功能和需求如下：1、单选组件请在 div.checkgroup 元素加上class radius2、选中时，请在对应选项dom元素加上class selected3、点击单选选项，如果未选中当前选项则选中当前选项并取消其他选项，否则取消当前选项4、点击多选选项，如果未选中当前选项则选中当前选项，否则取消当前选项5、给定的options中, text和value属性的值均为非空字符串6、val方法的参数和返回值均为数组(单选时数组长度不超过)7、请阅读代码，并根据注释完成对应代码(方法initHtml、toggleEl、isSelected、val)8、请不要手动修改html和css9、不要使用第三方插件

加载中...

function CheckGroup(renderTo, options, isMultiple) {
    var that = this;
    that.renderTo = renderTo;
    that.options = options;
    that.isMultiple = !!isMultiple;
    that.initHtml();
    that.initEvent();
}
CheckGroup.prototype.initHtml = fInitHtml;
CheckGroup.prototype.initEvent = fInitEvent;
CheckGroup.prototype.toggleEl = fToggleEl;
CheckGroup.prototype.isSelected = fIsSelected;
CheckGroup.prototype.val = fVal;

function fInitHtml() {
    var that = this;
    // 请补全代码，拼接html字符串
    var sHtml = '';
    that.renderTo.innerHTML = sHtml;
    // 请补全代码，获取checkgroup的dom元素引用
    that.el = null;
}

function fInitEvent() {
    var that = this;
    that.el && that.el.addEventListener('click', function (event) {
        var item = event.target;
        item.classList.contains('item') && that.toggleEl(item);
    });
}

function fToggleEl(item) {
    // 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消���亮指定的选项dom元素
    var that = this;
    if (that.isSelected(item)) {
        // 请补全代码
    } else if (that.isMultiple) {
        // 请补全代码
    } else {
        // 请补全代码
    }
}

function fIsSelected(item) {
    // 请补全代码，判断item是否选中
    return item;
}

function fVal(values) {
    var that = this;
    if (arguments.length === 0) {
        // 请补全代码，获取高亮的选项元素
        var items = null;
        // 请补全代码，获取高亮的选项元素的data-val
        var result = [];
        return result;
    }
    !that.isMultiple && values.length > 1 && (values.length = 1);
    // 请补全代码，获取所有的选项元素
    var items = null;
    // 请补全代码，在指定元素上加上高亮的class
}