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>

  • 相关阅读:
    java的反射机制浅谈 分类: java
    2.4.3 Cow Tours
    2.4.2 Overfencing
    2.4.1 The Tamworth Two
    Shortest Paths
    2.3.5 Controlling Companies
    2.3.4 Money Systems
    2.3.3 Zero Sum
    2.3.2 Cow Pedigrees
    2.3.1 Longest Prefix
  • 原文地址:https://www.cnblogs.com/xiaolinxi/p/5960389.html
Copyright © 2011-2022 走看看