JS使用展开符把NodeList转化为Array

NodeList to Array，本例实现一个限定数量的多选控件。

js, es6

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1134
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const fruits = [{
    title: " apple",
    value: 1
}, {
    title: " orange",
    value: 2
}, {
    title: " banana",
    value: 3
}, {
    title: " grape",
    value: 4
}, {
    title: " strawberry",
    value: 15
}];

const AppDom = document.getElementById("app");

const fragment = document.createDocumentFragment(); //for performance
const listDom = document.createElement("ul");

function handleCheckbox(evt) {
    const checkboxs = listDom.querySelectorAll("input[type=checkbox]");
    const values = [...checkboxs]
        .filter((it) => it.checked)
        .map((it) => {
            return it.value;
        });

if (values.length >= 3) {
        [...checkboxs].forEach((it) => {
            if (!it.checked) {
                it.disabled = true;
            }
        });
    } else {
        console.log(checkboxs);
        [...checkboxs].forEach((it) => {
            it.disabled = false;
        });
    }

localStorage.setItem("fruits", JSON.stringify(values));
}

const _oldFruits = JSON.parse(localStorage.getItem("fruits")) || [];

//construct list
for (const fruit of fruits) {
    const li = document.createElement("li");
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.value = fruit.value;
    checkbox.checked = _oldFruits.includes(fruit.value.toString());
    checkbox.addEventListener("change", handleCheckbox);
    li.appendChild(checkbox);
    li.appendChild(document.createTextNode(fruit.title));
    listDom.appendChild(li);
}

fragment.appendChild(listDom);
AppDom.appendChild(fragment);

编译

CSS

HTML

NodeList to Array，本例实现一个限定数量的多选控件。

js, es6

编辑器支持Emmet

快捷键

NodeList to Array，本例实现一个限定数量的多选控件。

js, es6

使用jQuery和WavesJS实现的一款原质化风格“回到顶部”按钮

HTML5 NextParticle.js图像粒子化引擎演示实例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：