js表单全选，全不选，删除示例

最新推荐文章于 2023-07-18 11:18:07 发布
最新推荐文章于 2023-07-18 11:18:07 发布
阅读量579 收藏 1
点赞数 2
分类专栏： javascript 文章标签： js表单全选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42321963/article/details/81874920
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dz {
            margin: 20px auto;
            text-align: center;
        }

        button {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div id="dz">
    <div><input type="checkbox" name="in">姓名：李四1
        <button type="button" class="deld">删除</button>
        <br></div>
    <div>
        <input type="checkbox" name="in">姓名：李四2
        <button type="button" class="deld">删除</button>
        <br>
    </div>
    <div>
        <input type="checkbox" name="in">姓名：李四3
        <button type="button" class="deld">删除</button>
        <br>
    </div>
    <div>
        <input type="checkbox" name="in">姓名：李四4
        <button type="button" class="deld">删除</button>
        <br>
    </div>
    <div>
        <input type="checkbox" name="in">姓名：李四5
        <button type="button" class="deld">删除</button>
        <br>
    </div>
    <div>
        <input type="checkbox" name="in">姓名：李四6
        <button type="button" class="deld">删除</button>
        <br>
    </div>
    <br>
    <div>
        <button type="button" onclick="myall()" id="b1">全选</button>
        <button type="button" onclick="myno()" id="b2">全不选</button>
    </div>
</div>
<script>
    var aa = document.getElementsByName("in");

    function myall() {
        for (var o of aa) {
            o.checked = true;
        }
    }

    var nn = document.getElementsByName("in");

    function myno() {
        for (var n of nn) {
            n.checked = false;
        }
    }

    var bb = document.getElementsByClassName("deld");
    setInterval(f, 20);

    function f() {
        for (var b of bb) {
            b.onclick = function () {
                b.parentElement.remove();
            }
        }
    }
</script>
</body>
</html>

结果：

 

comeonzeze-邢泽涛
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Js实现复选框的全选、全不选反选功能代码实例
10-15
主要介绍了Js实现复选框的全选、全不选和反选,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js 全选
qq_49438920的博客
06-06 970
checkbox全选实现，Array.from、every、forEach的应用
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1007
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
JavaScript 实现全选、全不选和反选功能
最新发布
不抛弃、不放弃：Aaron莫言
07-18 1497
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true。的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。
js实现全选、全不选、反选、选中的值、必选中一个
流绪@微梦
11-12 6624
直接上代码 1.html代码 &amp;lt;input type=&quot;Checkbox&quot; onclick=&quot;checkAll(this)&quot; id=&quot;all&quot; /&amp;gt;全选 &amp;lt;input type=&quot;Checkbox&quot; onclick=&quot;checkAllNo()&quot; id=
js-仿京东显示隐藏密码
qq_41670147的博客
11-21 1052
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js实现表单项的全选、反选及删除操作示例
01-19
本文实例讲述了js实现表单项的全选、反选及删除操作。分享给大家供大家参考，具体如下： <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>网站会员激活码管理</title> [removed]...
表单Form的submit事件不响应的解决方法
12-10
虽然用submit方法来提交表单有违Unobtrustive Javascript的原则，但有时候不得不用，比如做搜索提示（auto-complete)选中Item之后就需要用JS来提交搜索表单。 二、问题分析 既然本身不响应事件，那只有手工触发这些...
jQuery 的全选、反选插件
05-01
内容索引:脚本资源,jQuery,Js全选代码　应用了jQuery 插件的一个Ajax小功能，网页上的全部选中、反向选中功能，实现一个表单列表数据的全选或反选功能，内含示例，小巧实用。
js使用小技巧
07-11
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
【JS】实现全选功能
点滴记忆
07-12 865
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
JavaScript 实现全选、单选和反选
m0_71966801的博客
07-07 787
接着，使用一个循环为每个选项复选框添加 change 事件监听器，当任意一个选项复选框的状态发生变化时，判断是否所有选项复选框都被选中，如果是，则将全选复选框的状态设为选中；如果不是，则将全选复选框的状态设为未选中。在 JavaScript 部分，我们首先获取到全选复选框和选项复选框的引用。然后，为全选复选框添加一个 change 事件监听器，当选择状态发生变化时，将其状态应用到所有选项复选框上。的函数来实现反选的功能。然后，再次判断是否所有选项复选框都被选中，并根据结果设置全选复选框的状态。
js实现全选，全不选和反选功能
sinat_41660714的博客
11-20 1869
首先来展示一下 上图中实现的功能是： 点击顶部全选框选中，全部的框都会选中，反之就会全不选中； 当表体中选框全部选中时，全选框选中 当点击反选按钮时，表体中的选框状态置反，选中的变为没选中，没选中变为选中 直接上代码，我就不贴表格样式部分代码了，只贴js实现部分 <script> //1， 全选全不选 var all=document.getElementById("all")...
demo3 表单全选 、全消 实现
lryh_的博客
01-29 301
全选 反选
表单全选取消全选
weixin_48912846的博客
01-20 610
案例分析： ①全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 ②下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中 ③可以设置变量，来控制全选是否选中 ④ //获取元素 var j_cbAll = document.getElementById('j_cbAll') //全选按钮 var j_tbs = document.getElementById('j_
【JavaScript】-- 利用JS实现全选/取消全选
qq_48802092的博客
08-30 2996
实现要求： 点击"全选"框，以下所有选项全部勾选。 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。 当其他复选框全部选中，"全选框"为选中状态。 当其他复选框有一个未选中，"全选框"取消选中状态。...
Jquery实现表单的“全选”，“全部不选”功能
weixin_51474578的博客
07-20 1982
希望帮助到你！！！
js代码实现简易表单选择
gyw的博客
08-30 522
文章目录 前言 一、需求 二、代码 总结 前言 没有前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、需求 实现全不选、全选、反选 二、js代码 1.渲染选项 数组内有几项内容就渲染几个选项出来，设置样式之后加入到form1中。 let input_arr; let p_arr=["Dior","Chanel","LV","YSL","Mac","TF"] let form2 = document.querySelec...
js表单全选和取消全选
04-06
以下是一个实现js表单全选和取消全选的示例代码： HTML代码： ```html <label><input type="checkbox" name="fruit" value="apple">苹果</label><br> <label><input type="checkbox" name="fruit" value=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值