用JavaScript实现选项卡功能,当选择全选按钮的时候,下边的复选框所以按钮被选中,当取消一个复选框按钮时,全选框按钮失去效果,当再次把所有复选框按钮选择实现全选

点击全选,让下边的按钮都被选中,以及复选框的交互

简单上代码啦~~
CSS样式

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 100%;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
            text-align: center;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

Body部分

<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="ck_all"/>全选
            </th>
            <th>课程名称</th>
            <th>讲师</th>
        </tr>
        </thead>
        <tbody id="tby">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>html</td>
            <td>文雅啊</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>css</td>
            <td>文雅啊</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>JavaScript</td>
            <td>文雅啊</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>jQuery</td>
            <td>文雅啊</td>
        </tr>
        </tbody>
    </table>
    <input type="button" value="反选" id="btn">
</div>

Sctipt部分
JQ版

<script src="js/jquery-1.12.1.js"></script>
<script>
    //jQuery的入口函数
    $(function () {
        //全选
        $('#ck_all').click(function () {
            //当前复选框的选中状态
            var flag=$(this).prop('checked');
            //修改所有的input框的选中状态
            $('#tby input').prop('checked',flag);
        });
        //复选框的交互
        $('#tby input').click(function () {
            var n1= $('#tby input').length;
            var n2= $('#tby input:checked').length;
            $('#ck_all').prop('checked',n1==n2)
        });

    });
</script>
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
程序员必经之路! 【限优惠】 现在下单还享四重好礼: 1、教学课件免费下载 2、课程案例代码免费下载 3、专属VIP学员群免费答疑 4、下单还送800元编程大礼包 【超实课程内容】  根据《2019-2020年中国开发者调查报告》显示超83%开发者都在使MySQL数据库。使量大同掌握MySQL早已是运维、DBA必备技能甚至部分IT开发岗位也要求对数据库使和原理有深入了解和掌握。 学习编程你可能会犹豫选择 C++ 还是 Java;入门数据科学你可能会纠结于选择 Python 还是 R;但无论如何 MySQL 都是 IT 从业人员不可或缺技能!   套餐中一共包含2门MySQL数据库必学核心课程(共98课)   课程1:《MySQL数据库从入门到实战应》   课程2:《高性能MySQL实战课》   【哪些人适合学习这门课程?】  1)平只接触了语言基础并未学习任何数据库知识人;  2)对MySQL掌握程度薄弱课程可以让你更好发挥MySQL最佳性能; 3)想修炼更好MySQL内功工作中遇到高并发场景可以游刃有余; 4)面试官打破沙锅问到底问题问到怀疑人生应聘者。 【课程主要讲哪些内容?】 课程一:《MySQL数据库从入门到实战应》 主要从基础篇SQL语言篇、MySQL进阶篇三个角度展开讲解帮助大家更加高效管理MySQL数据库。 课程二:《高性能MySQL实战课》主要从高可篇、MySQL8.0新特性篇性能优化篇面试篇四个角度展开讲解帮助大家发挥MySQL最佳性能优化方法掌握如何处理海量业务数据和高并发请求 【你能收获到什么?】  1.基础再提高针对MySQL核心知识点学透对; 2.能力再提高日常工作中代码换新貌不怕问题; 3.面试再加分巴不得面试官打破沙锅问到底竞争力MAX。 【课程如何观看?】  1、登录CSDN学院 APP 在我课程中进行学习; 2、移动端:CSDN 学院APP(注意不是CSDN APP哦)  本课程为录播课课程永久有效观看长 【资料开放】 课件、课程案例代码完开放给你你可以根据所学知识自行修改、优化。  下载方式:电脑登录课程观看页面点击右侧课件可进行课程资料打包下载。
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值