首页 > 试题广场 >

选择组件

[编程题]选择组件

热度指数：2584 时间限制：C/C++ 3秒，其他语言6秒空间限制：C/C++ 128M，其他语言256M
算法知识视频讲解

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 radius
2、选中时，请在对应选项dom元素加上class selected
3、点击单选选项，如果未选中当前选项则选中当前选项并取消其他选项，否则取消当前选项
4、点击多选选项，如果未选中当前选项则选中当前选项，否则取消当前选项
5、给定的options中, text和value属性的值均为非空字符串
6、val方法的参数和返回值均为数组(单选时数组长度不超过)
7、请阅读代码，并根据注释完成对应代码(方法initHtml、toggleEl、isSelected、val)
8、请不要手动修改html和css
9、不要使用第三方插件

算法知识视频讲解

HTML/CSS/JavaScript

桦林晨风

为啥案例提示true，但是还是不通过，本地已测试通过，求高手帮忙看下代码

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;
        CheckGroup.prototype.clear = fClear;

        function fInitHtml() {
            var that = this;
            // 请补全代码，拼接html字符串
            var sHtml = '<div class="checkgroup' + (that.isMultiple ? '' : ' radius') + '">' + that.options.map(v =>
                '<div data-val="' + v['value'] +
                '" class="item">' + v['text'] + '</div>').join('') + '</div></div>';
            that.renderTo.innerHTML = sHtml;
            // 请补全代码，获取checkgroup的dom元素引用
            that.el = that.renderTo.querySelector('.checkgroup');
        }

        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;
            var allItem = that.el.getElementsByClassName('item');
            if (that.isSelected(item)) {
                // 请补全代码
                item.classList.remove('selected');
            } else if (that.isMultiple) {
                // 请补全代码
                item.classList.add('selected');
            } else {
                // 请补全代码
                that.clear();
                item.classList.add('selected');
            }
        }

        function fClear() {
            var that = this;
            var allItem = that.el.getElementsByClassName('item');
            for (let v of allItem) {
                v.classList.remove('selected');
            };
            return allItem;
        }

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

        function fVal(values) {
            var that = this;
            if (arguments.length === 0) {
                // 请补全代码，获取高亮的选项元素
                var items = Array.from(that.el.getElementsByClassName('item')).filter(v => v.classList.contains(
                    'selected'));
                // 请补全代码，获取高亮的选项元素的data-val
                var result = items.map(v => v.getAttribute('data-val'));
                return result;
            }!that.isMultiple && values.length > 1 && (values.length = 1);
            // 请补全代码，获取所有的选项元素
            var items = that.clear();
            // 请补全代码，在指定元素上加上高亮的class
            for (let v of items) {
                if (values.includes(v.getAttribute('data-val'))) {
                    v.classList.add('selected');
                }
            };
        }

发表于 2021-12-23 10:10:38 回复(1)

HTML/CSS/JavaScript

ProApe

function CheckGroup(renderTo, options, isMultiple = false) {
    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 = '';
    sHtml += `<div class="checkgroup ${that.isMultiple?'':'radius'}">`
    that.options.forEach(item => {
        sHtml += `<div data-val="${item.value}" class="item">${item.text}</div>`;
    });
    sHtml += `</div>`;
    that.renderTo.innerHTML = sHtml;
    // 请补全代码，获取checkgroup的dom元素引用
    that.el = that.renderTo.querySelector('.checkgroup');
}

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)) {
        // 请补全代码
        item.classList.remove('selected');
    } else if (that.isMultiple) {
        // 请补全代码
        item.classList.add('selected');
    } else {
        // 请补全代码
        var now = that.renderTo.querySelector('.selected');
        now && now.classList.remove('selected');
        item.classList.add('selected');
    }
}

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

function fVal(values) {
    var that = this;
    if (arguments.length === 0) {
        // 请补全代码，获取高亮的选项元素
        var items = that.renderTo.querySelectorAll('.selected');
        // 请补全代码，获取高亮的选项元素的data-val
        var result = [...items].reduce((pre, now) => {
            pre.push(now.getAttribute('data-val'));
            return pre;
        }, []);
        return result;
    }!that.isMultiple && values.length > 1 && (values.length = 1);
    // 请补全代码，获取所有的选项元素

    var items = [...that.renderTo.getElementsByClassName('item')];
    // 请补全代码，在指定元素上加上高亮的class
    items = items.filter((item) => {
        return values.includes(item.getAttribute('data-val'));
    })
    if (!that.isMultiple) {
        that.toggleEl(items[0]);
        return true;
    }
    items.forEach(item => {
        item.classList.add('selected');
    })
    return true;
}
// var item = new CheckGroup(document.getElementById('jsCheckGroup'), [{
//     text: '选项a',
//     value: 'a'
// }, {
//     text: '选项b',
//     value: 'b'
// }, {
//     text: '选项c',
//     value: 'c'
// }, {
//     text: '选项d',
//     value: 'd'
// }], false);
// item.val();

//第三组测试样例
function test() {
    var dv = document.getElementById('jsCheckGroup');
    dv.innerHTML = '';
    var item = new CheckGroup(dv, [{
        text: 'a',
        value: '1'
    }, {
        text: 'b',
        value: '2'
    }]);
    var el = dv.getElementsByClassName('checkgroup')[0];
    item.val(['1']);
    item.val(['2']);
    item.val(['1']);
    var result = !!(el.getElementsByClassName('selected').length === 1);
    return result;
}
console.log(test());

实际测试输出
提示错误的样例
感觉测试机有问题特意在本地测试了样例明明输出的true 到测试机这成了null了估计中毒不浅哈哈哈

发表于 2022-03-25 13:17:19 回复(0)

HTML/CSS/JavaScript

huaxifn

已跑通过

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.options.forEach(el=>{
        sHtml += `<div data-val="${el.value}" class="item">${el.text}</div>`;
    })
    sHtml = `<div class="checkgroup${that.isMultiple?'':' radius'}">${sHtml}</div>`;
    that.renderTo.innerHTML = sHtml;
    // 请补全代码，获取checkgroup的dom元素引用
    that.el = document.querySelector('.checkgroup');
}

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)) {
        item.classList.remove('selected');
        item.selected = false;
        // 请补全代码
    } else if (that.isMultiple) {
        // 请补全代码
        item.classList.add('selected');
    } else { //单选
        // 请补全代码
        if(item.parentElement.innerHTML.includes('selected')){
            item.parentElement.querySelector('.selected').classList.remove('selected');
        }
        item.classList.add('selected');
    }
}

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

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

发表于 2022-02-21 09:53:24 回复(0)

HTML/CSS/JavaScript

vc2

有点意思的一道题 自己写不难 难的是跟着题目的思路
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;
        //初始化html结构
        function fInitHtml() {
            var that = this;
            // 请补全代码，拼接html字符串
            var cHtml = that.options.map((item) => {
                return `${item.text}`
            }).join("")
            console.log(cHtml)
            var sHtml = '' + cHtml + '';
            that.renderTo.innerHTML = sHtml;
            // 请补全代码，获取checkgroup的dom元素引用，所有选项的父元素
            that.el = document.querySelectorAll('.checkgroup')[0];
            console.log(that.el)
            if (!that.isMultiple) that.el.classList.add('radius')
        }
        //为每个选项绑定点击监听事件
        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)) {
                // 请补全代码
                item.classList.remove("selected")
                that.val()
                //如果是多选
            } else if (that.isMultiple) {
                // 请补全代码
                item.classList.add("selected")
                that.val()
                //如果没选中而且不为多选，为单选
            } else {
                // 请补全代码
                let prevSelectedNode = Array.from(that.el.children).find(el => that.isSelected(el));
                console.log(prevSelectedNode)
                prevSelectedNode && prevSelectedNode.classList.remove("selected");
                item.classList.add("selected");
                that.val();
            }
        }
        //判断当前选项是否被选中
        function fIsSelected(item) {
            // 请补全代码，判断item是否选中
            if (item.classList.contains("selected")) return item
        }
        //输出值的函数
        function fVal(values) {
            var that = this;
            //如果传进来是空数组 即没有参数的情况
            if (arguments.length === 0) {
                // 请补全代码，获取高亮的选项元素
                let arr = Array.from(document.querySelectorAll('.item'))
                var items = arr.filter(item => item.classList.contains('selected'));
                // 请补全代码，获取高亮的选项元素的data-val
                var result = [];
                result = items.map(item => item.getAttribute('data-val'))
                console.log(result)
                return result;
            }
            !that.isMultiple && values.length > 1 && (values.length = 1);
            // 请补全代码，获取所有的选项元素
            var items = Array.from(that.renderTo.childNodes[0].childNodes)
            // 请补全代码，在指定元素上加上高亮的class
            items.forEach(item => {
                //在指定元素上加上高亮
                if (values.includes(item.getAttribute('data-val'))) {
                    item.classList.add("selected");
                } else {
                    item.classList.remove("selected");
                }
            })
        }

发表于 2022-11-28 01:50:52 回复(0)

HTML/CSS/JavaScript

路过的一名白的不能再白的小白

感觉主要一开始看题目有点懵，后面看代码一步一步走下来还是挺简单的，不算难

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 = `<div class="checkgroup ${!that.isMultiple ? 'radius' : '' }">`;
    for(let i = 0; i< that.options.length; i++){
        sHtml += `<div data-val="${that.options[i].value}" class="item">${that.options[i].text}</div>`;
    }
    sHtml += "</div>"
    that.renderTo.innerHTML = sHtml;
    // 请补全代码，获取checkgroup的dom元素引用
    that.el = document.querySelector('.checkgroup');
}

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)) {
        // 请补全代码，如果当前元素是高亮就取消高亮
        item.className = 'item'
    } else if (that.isMultiple) {
        // 请补全代码，多选补上高亮
        item.className = 'item selected'
    } else {
        // 请补全代码，单选重置其他item
        const selected = document.querySelector('.selected')
        if(selected) selected.className = 'item'
        item.className = 'item selected'
    }
}

function fIsSelected(item) {
    // 请补全代码，判断item是否选中，传入的是一个dom元素
    return item.className.includes('selected');
}

function fVal(values) {
    var that = this;
    if (arguments.length === 0) {
        // 请补全代码，获取高亮的选项元素
        var items = document.querySelectorAll(".selected");
        // 请补全代码，获取高亮的选项元素的data-val
        var result = [];
        for(let i  = 0; i < items.length; i++){
            result.push(items[i].getAttribute("data-val"))
        }
        return result;
    }
    !that.isMultiple && values.length > 1 && (values.length = 1);
    // 请补全代码，获取所有的选项元素
    var items = document.querySelectorAll(".item");
    // 请补全代码，在指定元素上加上高亮的class
    for(let i  = 0; i < items.length; i++){
         items[i].className = values.includes(items[i].getAttribute("data-val")) ? 'item selected' : 'item'
    }
}

发表于 2022-10-14 17:43:00 回复(0)

HTML/CSS/JavaScript

书山仰止

注意牛客网编译器比较老旧，不要直接使用 forEach 遍历NodeList类数组，容易null

发表于 2023-05-18 18:36:41 回复(0)

牛客165716573号

本地跑是没问题的，但是一直通不过测试，有大神可以帮我看看吗

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.isMultiple==true?'<div class="checkgroup">':'<div class="checkgroup radius">';
    options.forEach((item)=>{
      sHtml += `<div data-val="${item.value}" class="item">${item.text}</div>`;
    })
    that.renderTo.innerHTML = sHtml;
    // 请补全代码，获取checkgroup的dom元素引用
    that.el = document.querySelector('.checkgroup');

}

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)) {
        // 请补全代码
        item.classList.remove("selected");
        item.selected = false;
    } else if (that.isMultiple) {
        // 请补全代码
        item.classList.add("selected");
    } else {
        // 请补全代码
        if(item.parentElement.innerHTML.includes('selected')){
            item.parentElement.querySelector('.selected').classList.remove('selected');
        }
        item.classList.add('selected');

    }
}

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

function fVal(values) {
    var that = this;
    if (arguments.length === 0) {
        // 请补全代码，获取高亮的选项元素
        var items = document.getElementsByClassName('item selected');
        // 请补全代码，获取高亮的选项元素的data-val
        var result = [];
        Array.from(items).forEach((item)=>{         
          result.push(item.attributes["data-val"].value)
        })
        return result;
    }
    !that.isMultiple && values.length > 1 && (values.length = 1);
    // 请补全代码，获取所有的选项元素
    var items = document.querySelectorAll(".item");
    // 请补全代码，在指定元素上加上高亮的class
    Array.from(items).forEach((item)=>{
      if (values.includes(item.dataset.val)) {
            item.classList.add("selected");
        } else {
            item.classList.remove("selected");
        }
    })

}

发表于 2023-03-02 15:29:16 回复(0)

HTML/CSS/JavaScript

一叶扁舟_

// 【排雷】（个人遇到的，不排除已经解决或没遇到情况，仅参考）
// 牛客解析器会报错：

（1）使用spread运算符，如var items = [...that.el.querySelectorAll('.selected')];

可用Array.from(that.el.querySelectorAll('.selected'))代替，来转换为数组，方便调用某些方法;

(2)最后任务，在指定元素上加上高亮的class：调用that.toggleEl(item) 无法通过，需要判断后进行 item.classList.add('selected') 或 item.classList.remove('selected')

发表于 2023-01-12 17:58:29 回复(0)

HTML/CSS/JavaScript

牛客327257497号

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;
        CheckGroup.prototype.clear = fClear;
 
        function fInitHtml() {
            var that = this;
            // 请补全代码，拼接html字符串
            var sHtml = '<div class="checkgroup' + (that.isMultiple ? '' : ' radius') + '">' + that.options.map(v =>
                '<div data-val="' + v['value'] +
                '" class="item">' + v['text'] + '</div>').join('') + '</div></div>';
            that.renderTo.innerHTML = sHtml;
            // 请补全代码，获取checkgroup的dom元素引用
            that.el = that.renderTo.querySelector('.checkgroup');
        }
 
        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;
            var allItem = that.el.getElementsByClassName('item');
            if (that.isSelected(item)) {
                // 请补全代码
                item.classList.remove('selected');
            } else if (that.isMultiple) {
                // 请补全代码
                item.classList.add('selected');
            } else {
                // 请补全代码
                that.clear();
                item.classList.add('selected');
            }
        }
 
        function fClear() {
            var that = this;
            var allItem = that.el.getElementsByClassName('item');
            for (let v of allItem) {
                v.classList.remove('selected');
            };
            return allItem;
        }
 
        function fIsSelected(item) {
            // 请补全代码，判断item是否选中
            return item.classList.contains('selected');
        }
 
        function fVal(values) {
            var that = this;
            if (arguments.length === 0) {
                // 请补全代码，获取高亮的选项元素
                var items = Array.from(that.el.getElementsByClassName('item')).filter(v => v.classList.contains(
                    'selected'));
                // 请补全代码，获取高亮的选项元素的data-val
                var result = items.map(v => v.getAttribute('data-val'));
                return result;
            }!that.isMultiple && values.length > 1 && (values.length = 1);
            // 请补全代码，获取所有的选项元素
            var items = that.clear();
            // 请补全代码，在指定元素上加上高亮的class
            for (let v of items) {
                if (values.includes(v.getAttribute('data-val'))) {
                    v.classList.add('selected');
                }
            };
        }

发表于 2022-08-05 15:46:45 回复(0)

HTML/CSS/JavaScript

球球你来个offer吧

又是答案差不多的

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 =
    '<div class="checkgroup ' +
    (that.isMultiple ? 'selected' : 'radius') +
    '">';
  that.options.forEach(function (item) {
    sHtml +=
      '<div data-val="' + item.value + '" class="item">' + item.text + '</div>';
  });
  sHtml += '</div>';
  that.renderTo.innerHTML = sHtml;
  // 请补全代码，获取checkgroup的dom元素引用
  that.el = document.querySelector('.checkgroup');
}

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)) {
    // 请补全代码
    item.classList.remove('selected');
  } else if (that.isMultiple) {
    // 请补全代码
    item.classList.add('selected');
  } else {
    // 请补全代码
    item.parentNode.children.forEach(function (selected) {
      selected.classList.remove('selected');
    });
    item.classList.add('selected');
  }
}

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

function fVal(values) {
  var that = this;
  if (arguments.length === 0) {
    // 请补全代码，获取高亮的选项元素
    var items = [].slice.call(that.el.querySelectorAll('.item.selected'), 0);
    // 请补全代码，获取高亮的选项元素的data-val
    var result = [];
    items.forEach(function (item) {
      result.push(item.getAttribute('data-val'));
    });
    return result;
  }
  !that.isMultiple && values.length > 1 && (values.length = 1);
  // 请补全代码，获取所有的选项元素
  var items = [].slice.call(that.el.querySelectorAll('.item'), 0);
  // 请补全代码，在指定元素上加上高亮的class
  that.options.forEach(function (option, index) {
    if (values.indexOf(option.value) > -1) {
      items[index].classList.add('selected');
    } else {
      items[index].classList.remove('selected');
    }
  });
}

发表于 2021-11-11 21:05:08 回复(3)

HTML/CSS/JavaScript

牛客976344615号

通过了部分用例

      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 = '<div class="checkgroup radius">';
        this.options.forEach(item => {
          sHtml += `<div data-val="${item.value}" class="item">${item.text}</div>`
        })
        sHtml += '</div>'
        that.renderTo.innerHTML = sHtml;
        // 请补全代码，获取checkgroup的dom元素引用
        that.el = this.renderTo.getElementsByClassName('checkgroup')[0];
      }

      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)) {
          // 请补全代码
          item.classList.remove('selected')
        } else if (that.isMultiple) {
          // 请补全代码
          item.classList.add('selected')
        } else {
          // 请补全代码
          const selectedEle = that.el.getElementsByClassName('selected')[0]
          if (selectedEle) {
            selectedEle.classList.remove('selected')
          }
          item.classList.add('selected')
        }
      }

      function fIsSelected(item) {
        // 请补全代码，判断item是否选中
        return item.classList.contains('selected')
      }

      function fVal(values) {
        var that = this;
        if (arguments.length === 0) {
          // 请补全代码，获取高亮的选项元素
          const result = [];
          const elements = document.querySelectorAll('.selected[data-val]')
          if (elements.length) {
            for(let item of elements) {
              result.push(item.dataset.val)
            }
          }
          
          // var items = null;
          // 请补全代码，获取高亮的选项元素的data-val
          return result;
        }
        !that.isMultiple && values.length > 1 && (values.length = 1);
        // 请补全代码，获取所有的选项元素
        const result = []
        values.map(val => {
          const element = document.querySelector(`div.item[data-val=${val}]`)
          if (element) {
            !element.classList.contains('selected') && element.classList.add('selected')
            result.push(val)
          }
        })

        return result

        // var items = null;
        // 请补全代码，在指定元素上加上高亮的class
      }

      var checkGroup = new CheckGroup(document.getElementById('jsCheckGroup'), [{ text: '选项a', value: 'a' }, { text: '选项b', value: 'b' },
       { text: '选项c', value: 'c' }, { text: '选项d', value: 'd' }], true)

发表于 2021-11-08 15:52:11 回复(0)

忙碌的杰克在看面经

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 = `<div class="checkgroup ${that.isMultiple ? '' : 'radius'}">` + that.options.map(option => {
        return `<div data-val="${option.value}" class="item">${option.text}</div>`
    }).join('') + '</div>'
    that.renderTo.innerHTML = sHtml;
    // 请补全代码，获取checkgroup的dom元素引用
    that.el = that.renderTo.querySelector('div.checkgroup');
}

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)) {
        // 请补全代码
        item.classList.remove('selected')
    } else if (that.isMultiple) {
        // 请补全代码
        item.classList.add('selected')
    } else {
        // 请补全代码
        item.parentNode.children.forEach(ele => {
            ele.classList.remove('selected')
        })
        item.classList.add('selected')
        
    }
}

function fIsSelected(item) {
    // 请补全代码，判断item是否选中
    return item.classList.contains('selected')
}

function fVal(values) {
    var that = this;
    if (arguments.length === 0) {
        // 请补全代码，获取高亮的选项元素
        var items = that.el.querySelectorAll(`div.selected`);
        // 请补全代码，获取高亮的选项元素的data-val
        var result = Array.from(items).map(ele => {
            return ele.dataset.val
        });
        return result;
    }
    !that.isMultiple && values.length > 1 && (values.length = 1);
    // 请补全代码，获取所有的选项元素
    var items = that.el.querySelectorAll('.item');
    // 请补全代码，在指定元素上加上高亮的class
    Array.from(items).forEach(ele => {
        //  浏览器 不支持 nodelist的 forEach 导致通不过........!!!!!!!!
   // (items).forEach(ele => {
        if(values.includes(ele.getAttribute('data-val'))) {
            ele.classList.add('selected')
        } else {
            ele.classList.remove('selected')
        }
    })
}

转

发表于 2021-09-09 09:44:25 回复(0)

摩罗星

本地试可以，但是这上边就内部错误，有人通过了吗？发点题解让我们学习学习😂

发表于 2021-06-23 15:46:49 回复(0)

牛客6076287号

一直提示内部错误，仅供参考

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 = `<div class="checkgroup${that.isMultiple ? "" : " radius"}">`;
    for (let i = 0; i < that.options.length; i++) {
        sHtml += `<div data-val="${that.options[i].value}" class="item">${that.options[i].text}</div>`;
    }
    sHtml += "</div>";
    that.renderTo.innerHTML = sHtml;
    // 请补全代码，获取checkgroup的dom元素引用
    that.el = document.getElementsByClassName("checkgroup")[0];
}

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)) {
        // 请补全代码
        item.classList.remove("selected");
    } else if (that.isMultiple) {
        // 请补全代码
        item.classList.add("selected");
    } else {
        // 请补全代码
        let itemList = document.getElementsByClassName("item");
        for (let i = 0, len = itemList.length; i < len; i++) {
            if (itemList[i].classList.contains("selected")) {
                itemList[i].classList.remove("selected");
                break;
            }
        }
        item.classList.add("selected");
    }
}

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

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

发表于 2021-06-22 20:42:58 回复(0)