使用JavaScript完成表格的全选与取消

最新推荐文章于 2024-07-11 20:55:36 发布
最新推荐文章于 2024-07-11 20:55:36 发布
阅读量122 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/smileL/p/8995774.html
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>使用JavaScript实现全选与取消</title>
        <script>
            //选择all复选框，判断每个子复选框的checked值是否与all复选框的值一样
            function chooseAll()
            {
               var flag=document.getElementById("all").checked;
               for(var i=1;i<=4;i++)
               {
                  document.getElementById("c"+i).checked=flag;
               }
            }
            function chooseNum(num)
            {
                 var flag=document.getElementById("c"+num).checked;
                 //书写子复选框是否全部选中，从而确定all复选框的值是否勾选方法
                 checkAll();
            }
            function checkAll()
            {
                var isFlag=true;
                for(var i=1;i<=4;i++)
                {
                    var flag=document.getElementById("c"+i).checked;
                    if(flag==false)
                    {
                       isFlag=false;
                    }
                }
                if(isFlag)
                {
                    document.getElementById("all").checked=true;
                }
                else
                {
                    document.getElementById("all").checked=false;
                }
            }
        </script>
        <style type="text/css">
         td
         {
           width:150px;
           font-size:15px;
           text-align:center;
         }
         input
         {
           text-align:center;
         }
        </style>
    </head>
    <body>
        <div align="center">
            <form action="" method="post" >
                <table border="1px" width="500px"height="50px" align="center">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="all"  onclick="chooseAll()"/></th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>购买数量</th>
                            <th>商品总价</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        <tr>
                            <td><input type="checkbox" id="c1" onclick="chooseNum(1)"/></td>
                            <td>华为P20</td>
                            <td>4500</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" id="c2" onclick="chooseNum(2)"/></td>
                            <td>iphoneX</td>
                            <td>8000</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" id="c3" onclick="chooseNum(3)"/></td>
                            <td>小米6</td>
                            <td>2399</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" id="c4" onclick="chooseNum(4)"/></td>
                            <td>OPPOR11</td>
                            <td>1899</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </body>
</html>>
View Code

 

转载于:https://www.cnblogs.com/smileL/p/8995774.html

diaoqiao1909
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现表格全选和取消全选
qq_41619968的博客
04-10 196
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <titl.
javascript 全选/反选,取消选择效果
11-30
在网页交互设计中，全选、反选以及取消选择功能是非常常见且实用的特性，尤其在数据列表或者表格中，用户可以通过这些操作快速地选择或取消选择多项元素。JavaScript 作为浏览器端的主要脚本语言，提供了实现这些...
element表格取消全选_表格瘦身的两种常用方法，让你的表格飞速起来
weixin_39557583的博客
01-03 246
职场中的很多小伙伴在使用Excel表格的过程中发现，明明自己的表格中没有多少内容，但是要么体积很大，要么反应很慢，保存一下的时间都够喝杯茶水了，那么有什么好的方法来解决这个问题吗，其实可以通过给文件减肥来解决。哪些内容容易导致文件虚胖哪些内容容易导致文件内容不多却体积很大了，一般是网页上直接复制的文本进行粘贴，这时你把网页上的复杂格式都粘贴到了表格中，导致文件变大，更多的时候还会把一些控件复制到表...
JavaScript中实现一键全选功能
u014007037的专栏
05-05 1603
function chooseAll() { var all = document.getElementById("all"); var ch = document.getElementsByName("ch"); for(var i=0;i ch[i].checked = all.checked; } }                       
JavaScript表格的全选和删除
banmengyou的博客
04-20 1426
这周JavaScript有一个是制作一个表格，在表格中一点全选就把复选框中的按钮选中，点后面的表格中的del就能删除相应的行，一开始并没有头绪，即使以前做过全选的，但是，再做起来还是不能很快的做出来，也还有很多不了解的地方，要不是问同学还不一定做的出来呢。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset...
JavaScript表格全选和取消全选
m0_51512211的博客
06-19 104
JavaScript表格全选和取消全选
表格全选、取消全选
liying999的博客
04-10 428
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格全选/取消全选</title> <style> * { padding: 0; margin: 0; } .wrap { .
表格全选\取消全选
f_3345938485的博客
04-07 550
运行代码： <body> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse:
表格全选和取消全选功能实现
m0_56844750的博客
03-23 565
1.创建HTML表格` ` <td><input type="checkbox" class="th_b"></td> <td align="center">代码</td> <td align="center">代码</td> <td align="center">代码</td>
JavaScript自动勾全选和取消全选
dsadada23的博客
08-22 2180
在查看列表数据时，当我们想选中一条数据的时候，勾选一下就选中一条数据，如果说列表的数据有很多条很多页，那对用户也太不友好了。
layui复选框的全选与取消实现方法
10-16
本文将详细讲解如何使用 Layui 实现复选框的全选与取消功能，这对于用户交互和数据筛选至关重要。 首先，我们来看一下 HTML 结构。在给出的示例中，可以看到有两个级别的复选框：一级复选框（全选/取消）和二级复选...
微信小程序实现多选框全选与取消全选功能示例
10-17
在微信小程序中，实现多选框（Checkbox）的全选与取消全选功能是一项常见的需求，主要用于批量操作或数据筛选。下面将详细讲解如何通过JavaScript（JS）、WXML（微信小程序的XML标记语言）和WXSS（微信小程序的CSS...
checkbox的全选与取消
03-16
全选和取消功能通常用于表格或者列表中，让用户能够便捷地操作大量选项。 首先，我们来看看复选框的基本结构。在HTML中，复选框通过`<input>`标签来创建，类型设置为"checkbox"： ```html ``` 这里的`id`属性...
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 868
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 435
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 184
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
最新发布
huanghm88的专栏
07-11 604
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
JS混淆基本类型和原理
朴拙科技的博客
07-06 738
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
用js对一个表格实现全选和全取消功能
03-10
// 遍历所有复选框，设置它们的选中状态与全选按钮相同 for (var i = ; i ; i++) { checkboxes[i].checked = selectAll.checked; } }); // 给每个复选框添加点击事件 for (var i = ; i ; i++) { checkboxes[i]...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值