zoukankan      html  css  js  c++  java
  • 全选功能

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>收入计算器</title>
        <script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    <body>

    <div class="row">
        <input type="checkbox" class="select-all"/>
        全选
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
    </div>

    <div class="row">
        <input type="checkbox" class="select-all"/>
        全选
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
    </div>

    <div class="row">
        <input type="checkbox" class="select-all"/>
        全选
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
        <input type="checkbox" class="single"/>
    </div>

    <script>

        $('.row').each(function () {
            // 一行一行的处理
            var row = $(this);

            // 全选功能,点击全选,选中所有
            row.find(".select-all").on("click", function(){
                // 控制本行的
                var checkboxes = row.find(".single");
                if($(this).is(":checked")){
                    checkboxes.prop("checked", true);
                }else{
                    checkboxes.prop("checked", false);
                }
            });

            // 点击单条,控制全选的状态
            row.find(".single").on("click", function(){
                // 单条选择后,获取没有选中的数量
                var unCheckedLength = row.find(".single:not(:checked)").length;
                if (unCheckedLength > 0) {
                    row.find(".select-all").prop("checked", false);
                } else {
                    row.find(".select-all").prop("checked", true);
                }
            });
        });

    </script>


    </body>
    </html>

  • 相关阅读:
    软件构造 第七章第三节 断言和防御性编程
    软件构造 第七章第二节 错误与异常处理
    软件构造 第七章第一节 健壮性和正确性的区别
    软件构造 第六章第三节 面向可维护的构造技术
    软件构造 第六章第二节 可维护的设计模式
    欧拉函数代码实现及扩展--快速矩阵幂
    编译原理
    算法设计与分析总结
    人工智能简答总结
    感想
  • 原文地址:https://www.cnblogs.com/xiaolinxi/p/5960389.html
Copyright © 2011-2022 走看看