添加额外的复选框以实现先前选中/取消选中的功能-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

添加额外的复选框以实现先前选中/取消选中的功能

P粉765570115 2023-08-13 15:45:54

[HTML讨论组]

975

这个表单是一个带有HTML/CSS/JavaScript的待办事项列表，每一行都有一个基于已完成任务或未完成任务的复选框。我创建了一个事件。它从一个对象中获取一些值，比如文本、创建时间、ID等，最后将一个li标签附加到inner HTML+=...中。如果我在

中勾选了前一个复选框，但当触发事件（按下按钮）时，新的行添加时未勾选（这是正常的），但是前一行的复选框也未勾选！？

P粉765570115

全部回复(1)

P粉3814637802023-08-14 12:26:26 1楼

这是一个快速的代码片段，复制了你的问题。运行它，然后在复选框上进行检查元素。注意，选中/取消选中复选框不会改变你正在检查的HTML代码？

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    document.getElementById('addNewBtn').addEventListener('click', onAddBtnClick, false);
}

function onAddBtnClick(evt)
{
    let newStr = "<li><input type='checkbox'/></li>";
    document.querySelector('ul').innerHTML += newStr;
}

    <ul>
        <li><input type='checkbox'/></li>
    </ul>
    <button id='addNewBtn'>添加新项目</button>

这是一个替代的代码片段，它在列表的末尾添加了一个项目。

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    document.getElementById('addNewBtn').addEventListener('click', onAddBtnClick2, false);
}

function onAddBtnClick2(evt)
{
    let newLi = document.createElement('li');
    newLi.innerHTML = "<input type='checkbox'/>";
    document.querySelector('ul').appendChild(newLi);
}

    <ul>
        <li><input type='checkbox'/></li>
    </ul>
    <button id='addNewBtn'>添加新项目</button>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>