DOM操作---表单全选按钮和取消全选按钮

最新推荐文章于 2023-02-10 11:10:59 发布

前端小胖虎

最新推荐文章于 2023-02-10 11:10:59 发布

阅读量741

点赞数 1

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_43188011/article/details/120358410

版权

本文介绍了如何通过DOM操作在HTML表单中实现全选和取消全选的功能。通过分析案例，提供了两种不同的JavaScript实现方式，并给出了完整的HTML和JavaScript代码示例。

摘要由CSDN通过智能技术生成

DOM操作—表单全选按钮和取消全选按钮

【案例】表单全选按钮和取消全选按钮

业务需求：
1：点击上面全选复选框，下面所有的复选框都选中（全选）。
2：再次点击全选复选框，下面所有的复选框都不选中(取消全选)。
3：如果下面复选框全部选中，上面全选按钮就会自动选中。
4：如果下面复选框有一个没有选中，上面全选按钮就不选中。
5：所有复选框一开始默认都是没选中状态。

【案例分析】

	1：全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可。
	2：下面复选框需要全部选中，上面全选才能选中的做法：给下面所有复选框绑定点击事件，每次点击，都有循环查看下面的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。
	3：可以设置一个变量，来控制全选是否选中。

【实战】
【HTML部分代码】

<table border="1">
   <thead>
       <tr>
           <th> <input type="checkbox" id="j_cbAll"></th>
           <th>商品</th>
           <th>价钱</th>
       </tr>
   </thead>
    <tbody id="j_tb">
        <tr>
            <th><input type="checkbox"></th>
            <th>iphone8</th>
            <th>2000</th>
        </tr>
        <tr>
            <th><input type=