首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当javascript中的子复选框发生变化时,如何在父列表项(Li)中添加/删除类?

在javascript中,当子复选框发生变化时,我们可以通过事件监听和DOM操作来实现在父列表项(Li)中添加/删除类的操作。

首先,我们可以使用addEventListener方法为每个子复选框绑定change事件监听器。当子复选框状态改变时,触发change事件。然后,在事件处理函数中,我们可以通过DOM操作获取到父列表项(Li)的引用,并使用classList属性来添加/删除类。

以下是一个示例代码:

代码语言:txt
复制
// 获取所有的父列表项(Li)
const parentItems = document.querySelectorAll('li');

// 遍历每个子复选框
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
  // 绑定change事件监听器
  checkbox.addEventListener('change', function() {
    // 获取父列表项(Li)
    const parentItem = this.closest('li');

    // 根据子复选框的选中状态来添加/删除类
    if (this.checked) {
      parentItem.classList.add('selected');
    } else {
      parentItem.classList.remove('selected');
    }
  });
});

在上面的代码中,我们首先通过querySelectorAll方法获取到所有的父列表项(Li)和子复选框。然后,使用forEach方法遍历每个子复选框,并为其绑定change事件监听器。在事件处理函数中,使用closest方法获取到父列表项(Li)的引用,然后根据子复选框的选中状态来使用classList属性添加/删除类。

这样,当子复选框发生变化时,就可以在父列表项(Li)中添加/删除类了。

推荐的腾讯云相关产品和产品介绍链接地址:

  1. 腾讯云云服务器(CVM):提供弹性计算能力,满足各类计算场景的需求。产品介绍
  2. 腾讯云云数据库MySQL版(TencentDB for MySQL):全球领先的MySQL数据库服务,提供高性能、高可靠、弹性扩展的数据库解决方案。产品介绍
  3. 腾讯云对象存储(COS):提供安全可靠、低成本、高扩展的云端存储服务,适用于各种存储场景。产品介绍

请注意,本回答中提到的腾讯云相关产品仅作为示例,并非对其他云计算品牌商的推荐或评价。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

学习jQuery这一篇就够了

元素筛选器 需求描述:选择所有级元素 ul 下第一个元素 li,设置其背景为红色 我是列表项1 我是列表项2 我是列表项...addClass() 方法描述:为每个匹配元素添加指定样式名。... console.log($('p').hasClass('beauty')); # 5. toggleClass() 方法描述:为匹配元素集合每个元素上添加删除一个或多个样式...注意:如果存在(不存在)就删除添加)一个样式 需求描述:单击按钮时候,隐藏 div,再次单击按钮时候,显示 div .hide { width: 100px; height...需求描述:为 ul 下所有 li 添加单击事件,要求将该单击事件委托给 ul,单击 li ,所对应 li 背景变为红色 1111 2222</

99350

vuejs组件以及父子组件间通信传值

经典例子 同样,我会一步一步从原生js,jQuery在到vuejs,并且实现父子元素通信,实现效果如下图所示: 输入框内输入值,点击添加按钮,将表单添加到页面,同时,又可以删除表项内容,注意是删除表项而不是隐藏...(父子组件通信传值) 你将在以下看到,我先不使用组件方式实现todolist,然后转化为组件方式进行编写,添加内容实现组件传值给组件,删除表项,组件怎么触发组件进行通信,感受数据驱动影响视图...(组件向组件传值,自定义属性,组件通过props进行接收) 上面示例代码,实现组件向组件传值添加操作,那么现在我想点击每个列表项时候,能进行逐条删除操作,该怎么实现呢,这就涉及到组件向组件传值问题了...组件向组件传值通信 通过以上示例看出,组件根实例app里面datalist数据发生变化时,组件TodoList也会发生变化,也就是说组件里面的数据会影响组件显示,那么问题来了,现在我想要点击列表删除该项...deleteItemFun这个方法 点击列表项时候,组件监听到组件deleteitem时候就会到组件methods执行deleteitemFun这个方法,执行相应逻辑,这里自定义事件是

20.4K10
  • html学习笔记第二弹

    此标记在带有标题和正文HTML表中使用,称为“thead”和“tbody”。 标记是表标记,是和标记。...2”>即跨合并两个单元格 删除被合并单元格。...type属性常用属性值: 属性值描述button定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)checkbox定义复选框file定义输入字段和“浏览按钮”,供文件上传hidden...input元素首次加载应当被选中mexlength正整数规定输入字段字符最大长度 name和value是每个表单元素都有的属性值,主要是给后台人员使用 name表单元素名字, 要求单选按钮和复选框要有相同...label>标签为input元素定义标注(标签) 使用场景:标签用于绑定一个表单元素,点击标签内文本,浏览器就会自动将光标转到或选择对应表单元素上,用来增加用户体验

    9410

    【Java 进阶篇】深入理解 JavaScript DOM Node 对象

    添加删除节点 一旦我们创建了新节点,我们可以使用以下方法将它们添加到文档: appendChild(node):将一个节点添加为另一个节点节点,作为最后一个节点。...removeChild(node):从父节点中删除指定节点。 下面是一个示例,演示如何创建新节点并将其添加到文档: <!...parent和要删除元素child,然后使用removeChild方法从父元素删除元素。...使用JavaScript,我们遍历所有列表项,为每个列表项添加点击事件监听器。当用户单击列表项,我们查找其列表并切换其hidden,以控制列表显示或隐藏。...这篇博客深入介绍了JavaScript DOM Node对象,包括不同类型节点(元素节点、文本节点、属性节点、注释节点和文档节点)以及如何访问、创建、添加删除和替换节点。

    25210

    【前端】详解JavaScript事件代理(事件委托)

    JavaScript中常用绑定事件常用技巧。 顾名思义,“事件代理”即是把原本需要绑定在元素响应事件(click、keydown…)委托给元素,让元素担当事件监听职务。...一、事件冒泡 在JavaScript编程,事件代理(Event Delegation)是一种将事件监听器应用于一个元素,而不是直接应用于每一个元素技术。...一个事件在DOM元素上触发,它会首先在该元素上触发,然后逐级向上传播到文档根元素。这个过程就是事件冒泡。...假设上述例子表项li就几个,给每个列表项都绑定了事件。...但是在很多时候,需要通过 AJAX 或者用户操作动态增加或者删除表项li元素,那么在每一次改变时候都需要重新给新增元素绑定事件,给即将删去元素解绑事件。

    27410

    Vue v-for 指令深入解析:原理、实践与性能优化

    如果数组发生变化添加删除或重新排序元素),Vue.js 会更新 DOM 以反映这些变化。虚拟 DOM:Vue.js 使用虚拟 DOM 来优化 DOM 更新过程。...插入节点:将生成节点插入到节点中。更新 DOM:数据源发生变化时,Vue.js 会重新执行渲染函数,并根据新虚拟 DOM 节点更新实际 DOM。...列表发生变化时,Vue.js 可以通过 key 快速定位到具体元素,而不是重新渲染整个列表。...避免在列表项中使用内联函数在列表项中使用内联函数会导致每次渲染都创建新函数实例,这可能会影响性能。应该尽量避免这种情况,而是将函数定义在组件 methods 。 {{ todo.text }}动态更新列表我们可以动态地添加删除待办事项,Vue.js

    34710

    「jQuery」基础 - 02

    : 如果是选中状态,则当前商品添加背景,否则移除背景 这个背景,可以通过名修改,添加删除 代码实现下文。...} else { $(".cart-item").removeClass("check-cart-item"); } }) // 单个复选框发生变化时...').change(function() { if ($('.j-checkbox:checked').length == $('.j-checkbox').length) { // 复选框全部勾选触动全选框...案例:品优购电梯导航(下) 当我们点击电梯导航某个小li, 当前小li 添加current,兄弟移除名 当我们页面滚动到内容区域某个模块, 左侧电梯导航,相对应li模块,也会添加current...each里面能拿到内容区域每一个模块元素和索引号 判断条件: 被卷去头部 大于等于 内容区域里面每个模块offset().top 就利用这个索引号找到相应电梯导航小li添加。 代码实现略。

    2.8K20

    React 性能优化完全指南,将自己这几年心血总结成这篇!

    组件符合声明式设计理念,就可以忽略组件本次 Render 过程。...参考 Demo 没有添加删除、排序功能分页列表[16], 使用 key 每次翻页耗时约为 140ms,而不使用 key 仅为 70ms。...尽管存在以上场景,React 官方仍然推荐使用 ID 作为每项 key 值。其原因有两: 在列表执行删除、插入、排序列表项操作,使用 ID 作为 key 将更高效。...使用 ID 做为 key 可以维护该 ID 对应表项组件 State。举个例子,某表格都有普通态和编辑态两个状态,起初所有都是普通态,用户点击第一行第一,使其进入编辑态。...该例子组件状态更新后,不使用 useMemo 组件会执行 Render 过程,而使用 useMemo 组件不会执行。

    7.4K30

    【FE前端学习】第二阶段任务-基础

    ,标记标签是用尖括号包围关键词,以开始标签和结束标签成对存在,和 HTML属性,给元素提供了更多信息,在开始标签以名称/值形式出现,如下例href属性 HTML图像  没有闭合标签,src属性为图片地址,alt属性为图片不能加载替换文本...remove() - 删除被选元素(及其元素) empty() - 从被选元素删除元素 CSS 获取和设置 addClass() - 向被选元素添加一个或多个 removeClass() -...从被选元素删除一个或多个 toggleClass() - 对被选元素进行添加/删除切换操作 css() - 设置或返回样式属性 ("p").css("background-color","yellow...返回值是被找到值。如果没有发现匹配,则返回 null。 compile() 既可以改变检索模式,也可以添加删除第二个参数。

    5.1K10

    C#学习笔记—— 常用控件说明及其属性、事件

    使用多模式,可以使控件得以显示更多可见项,如图9-19 所示。 (3)ColumnWidth 属性:用来获取或设置多 ListBox控件宽度。...Items.Add 方法向列表框添加表项,不重绘列表框。...完成向列表框添加任务后,再调用 EndUpdate 方法使 ListBox 控件重新绘制。向列表框添加大量表项,使用这种方法添加项可以防止在绘制 ListBox 闪烁现象。...窗口本身不能再成为窗口,而且不能移动到它们窗口区域之外。除此以外,窗口行为与任何其他窗口一样(可以关闭、最小化和调整大小等)。...常用 MDI 窗体事MdiChildActivate,激活或关闭一个 MDI窗体将发生该事件。 3.菜单合并 窗体和窗体可以使用不同菜单,这些菜单会在选择窗体时候合并。

    9.7K20

    深入理解 DOM 事件机制

    UI事件,当用户与页面上元素交互触发,:load、scroll 焦点事件,元素获得或失去焦点触发,:blur、focus 鼠标事件,当用户通过鼠标在页面执行操作触发:dblclick、mouseup...滚轮事件,使用鼠标滚轮或类似设备触发,:mousewheel 文本事件,当在文档输入文本触发,:textInput 键盘事件,当用户通过键盘在页面上执行操作触发,:keydown、keypress...合成事件,为IME(输入法编辑器)输入字符触发,:compositionstart 变动事件,底层DOM结构发生变化时触发,:DOMsubtreeModified 同时 DOM3 级事件也允许使用者自定义一些事件...1.优点 减少内存消耗,提高性能 假设有一个列表,列表之中有大量表项,我们需要在点击每个列表项时候响应一个事件 // 例4 item 1 <...2.如何实现 接下来我们来实现上例层元素 #list 下 li 元素事件委托到它层元素上: // 给层元素绑定事件 document.getElementById('list').addEventListener

    2.8K50

    DOM事件传播机制

    引言--DOM事件传播机制是指一个事件在DOM树触发,它是如何在各个元素之间传播。DOM事件传播机制分为三个阶段:捕获阶段、目标阶段和冒泡阶段。...这样可以使我们页面变得更加有意思,而不仅仅像以前一样只能进行浏览。JavaScript 采用一个叫做事件监听器东西来监听事件是否发生。...这样一来,无论级元素是已经存在还是动态生成,都可以通过级元素来管理它们事件。...: 列表项1可以看到,通过在级元素上绑定点击事件处理程序,我们可以捕获到级元素触发点击事件,并且可以获取到触发事件目标元素。...这样一来,无论我们添加删除表项,只需要在级元素上绑定一个事件处理程序即可。总结--通过以上介绍,我们了解了DOM事件传播机制三个阶段:捕获阶段、目标阶段和冒泡阶段。

    18530

    jQuery基本操作

    :first-child //概述 匹配第一个元素 类似的(:first)匹配第一个元素,而次选择符将为 每个元素匹配一个元素· 描述 在每一个ul查找第一个li HTML代码 <ul...") 结果 [22222,55555]  :only-child  //概述 //如果某个是元素唯一元素,那将会被匹配· //如果元素中含有其他元素,...那将 不会被匹配·(注:这里其它元素并不包含文本节点,:网页,用$('p img:only-child')是可以匹配) 描述 在ul查找唯一元素li HTML代码...addClass(class|fn) //概述 //为每个匹配元素添加指定名· class 一个或多个要添加到元素CSS名,请用空格分开· function(index,class)...N个jQuery对象,返回jQuery对象,参数大于等于0为正向选取,比如0代表第一个,1代表第二个,参数为负数为反向选取·比如-1为倒数第一个,具体可以看一下实 类似的有get(index

    7.5K20

    HTML5新特性

    结构伪选择器 结构伪选择器主要根据文档结构来选择器元素, 常用于根据级选择器里面的元素属性选择器.png 结构伪选择器-01.png E:first-child 匹配元素第一个元素E...li标签 E:nth-child(n)(★★★) 匹配到元素第n个元素 匹配到元素第2个元素 ul li:nth-child(2){} 匹配到元素序号为奇数元素 ul li:nth-child...(odd){} odd 是关键字 奇数意思(3个字母 ) 匹配到元素序号为偶数元素 ul li:nth-child(even){} even(4个字母 ) 匹配到元素前3个元素 ul...步骤: 找到之前写过仿土豆结构和样式,拷贝到自己页面 删除之前mask遮罩 在style,给大div盒子(名叫tudou),设置 before伪元素 这个伪元素充当是遮罩角色,所以我们不用设置内容...Flash 动画或 JavaScript 情况下,元素从一种样式变换为另一种样式为元素添加效果。

    2.3K41

    jQuery学习笔记

    class="lang-javascript">JavaScript Python...,用$('input:focus')就可以选出; :checked:选择当前勾上单选框和复选框,用这个选择器可以立刻获得用户选择项目,$('input[type=radio]:checked');...查找节点 $('h3').parent().css() //查找h3元素 $('h3').sliblings()//所有兄弟节点 $('h3').nextAll()//当前节点后面所有兄弟节点 $...用于修改css比较方便 如果是js还需要遍历 添加class属性 在做过了几个案例很多都需要添加class属性 addClass()添加属性 显示和隐藏DOM jQueryshow()和hide...remove()删除DOM节点 事件 jQuery很多时候需要绑定事件来出发一些东西 on方法用来绑定一个事件 onclick //鼠标单机时触发 onmousemove //当鼠标指针移动到元素上触发

    1.3K40

    Jquery属性操作和DOM操作

    规定添加或移除一个或多个名。如需规定若干个,请使用空格分隔名。 2. Function(index,currentclass)可选。规定返回需要添加/删除一个或多个函数。...接受选择器的当前坐标 2. position() 方法返回匹配元素相对于元素位置(偏移)注:只能获取不能设置 在CSS定位布局,如果我们对元素设置position:relative,我们就可以使用...position:absolute来设置元素相对于元素定位距离 l  Position()函数用于返回当前匹配元素相对于其被定位祖辈元素偏移,也就是相对于被定位祖辈元素坐标。...删除所有节点),绑定事件,附加数据都会移除         2 detach()从DOM删除所有匹配元素()与remove()不同是,绑定事件,附加数据都会被保留下来        3...empty()删除匹配元素集合中所有节点,选中元素保留,仅删除节点,内容删除,元素依然保留        4 clone()复制节点,选中元素进行复制 <script type="text/

    1.4K20
    领券