全選功能

時間  2019-12-09
標籤 全選 功能 简体版
原文   原文鏈接

<!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>html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程