JavaScript表单全选取消案例

最新推荐文章于 2023-04-02 15:32:51 发布

ssjjqqqqqq

最新推荐文章于 2023-04-02 15:32:51 发布

阅读量671

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/ssjjqqqqqq/article/details/121317942

版权

本文介绍了一个使用JavaScript实现的表单全选和取消全选功能的案例。主要内容包括：1) 点击全选按钮可以选中或取消选中所有选项；2) 当所有选项被选中时，全选按钮自动选中；3) 任一选项取消选中时，全选按钮自动取消选中。实现思路涉及监听事件、checked属性以及遍历和设置选项状态。附带了代码示例和效果展示。

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

一个简单的实用案例。

实现效果：

1、点击全选按钮，下面的选项按钮全部选中或全取消。

2、只要下面四个按钮都选中了，全选按钮也被选中。

3、下面的选中按钮有一个取消选中，全选按钮也会取消选中。

主要思路：

1、两个事件，一个链接全选按钮，一个链接其他所有小按钮。

2、用checked获取全选按钮当前选中状态，结果为布尔值，true为选中，false为未选中。然后把全选按钮的状态赋值给下面的小按钮。

3、利用循环遍历小面所有小按钮，如果所有小按钮都选中，则全选按钮也会被选中，若有一个没被选中则全选按钮就不会选中。每次选择后都要循环查看其他按钮是否都被选中，故此处需要for循环嵌套。

代码环节：

基础样式设置：

 <style>
        table {
            width: 400px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 16px;
        }
        
        thead th {
            background: skyblue;
            border-bottom: 1px solid #999;
        }
        
        tbody tr {
            bord