题解 | #选择组件#

      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((element) => {
          sHtml += `<div data-val="${element.value}" class="item">${element.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;
        const checkgroup = document.querySelector(".checkgroup");
        // 当前被选中状态时，点击后处理
        if (that.isSelected(item)) {
          // 被选中时点击切换为未选中状态
          item.className = "item";
        } else if (that.isMultiple) {
          // 当前如果是多选
          item.className.includes("selected")
            ? (item.className = "item")
            : (item.className = "item selected");
        } else {
          // 当前切换为选中状态，其他切换为未选中状态
          item.className = "item selected";
          Array.from(document.querySelectorAll(".item")).filter((ele) => {
            if (ele !== item) {
              ele.className = "item";
            }
          });
        }
      }

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

      function fVal(values) {
        var that = this;
        if (arguments.length === 0) {
          // 请补全代码，获取高亮的选项元素
          var items = document.querySelectorAll(".item.selected");
          var result = Array.from(items).map((item) =>
            item.getAttribute("data-val")
          );
          return result;
        }
        !that.isMultiple && values.length > 1 && (values.length = 1);
        // 请补全代码，获取所有的选项元素
        var items = document.querySelectorAll(".item");
        for (let i = 0; i < values.length; i++) {
          that.toggleEl(
            document.querySelector(`.item[data-val="${values[i]}"]`)
          );
        }
        return values;
      }