首页 > 软件开发 > HTML >

JS删除选中复选框, 原生JS代码

来源:互联网 2023-03-16 19:12:31 467

之前写了一个用Jquery删除选中复选框的,现在有很多朋友询问如果不用jq代码,直接用js的原生代码,怎么实现这个功能。vru办公区 - 实用经验教程分享!

其实也不难,下面就一起来看一下。vru办公区 - 实用经验教程分享!

方法/步骤

  • 1

    html代码如图,要注意的地方是checkbox里有一个class样式名。vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

  • 2

    删除按钮的事件代码,我们先使用js的函数document.getElementsByClassName来通过样式名来获取到所有的checkbox复选框。vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

  • 3

    获取到的复选框是一个数组,我们得到数组的长度,然后用for循环来处理,要注意的是需要从后往前来循环,不然在同时删除多个的时候会有问题的。vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

  • 4

    通过checked属性来得到复选框是否处于选中状态。vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

  • 5

    从选中的复选框里,通过parentNode属性来获得它的父节点,即对应的div元素。vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

  • 6

    再通过div的parentNode,获取到最上一层的父节点,这时就可以使用removeChild方法来删除子节点了,传入的参数就是对应的div节点。vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

  • 6相关内容未经许可获取自百度经验
  • 7

    运行页面,选中一个复选框,点击删除按钮,可以看到成功删除了选中的这个了。vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

  • 8

    选中多个复选框,再点击删除,同样可以删除多个。vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

    JS删除选中复选框, 原生JS代码vru办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!vru办公区 - 实用经验教程分享!


    标签: JAVASCRIPTHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码