基于复选框勾选控制Div显隐，最多同时显示3个指定模块

Got it, let's fix this up to match your exact requirements. Here's a refined implementation that handles the default state, max 3 selection limit, and dynamic module display correctly:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Basic styling to hide inactive company modules */
        .comparison-table .col-sm-3[class^="company-"] {
            display: none;
        }
        .comparison-table .col-sm-3[class^="company-"].active {
            display: block;
        }
        /* Optional layout styling */
        .row-flex {
            display: flex;
            flex-wrap: wrap;
        }
        .col-sm-3 {
            width: 25%;
            box-sizing: border-box;
            padding: 10px;
        }
        .feature-box {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: center;
        }
        .comparison-selector {
            margin-bottom: 20px;
        }
        .comparison-selector label {
            margin-right: 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <div class="wrapper">
            <div class="comparison-selector">
                <input type="checkbox" class="selector-checkbox" id="company-01">
                <label for="company-01">Company 01</label>
                <input type="checkbox" class="selector-checkbox" id="company-02">
                <label for="company-02">Company 02</label>
                <input type="checkbox" class="selector-checkbox" id="company-03">
                <label for="company-03">Company 03</label>
                <input type="checkbox" class="selector-checkbox" id="company-04">
                <label for="company-04">Company 04</label>
                <input type="checkbox" class="selector-checkbox" id="company-05">
                <label for="company-05">Company 05</label>
                <input type="checkbox" class="selector-checkbox" id="company-06">
                <label for="company-06">Company 06</label>
            </div>
            <div class="comparison-table">
                <div class="row row-flex">
                    <div class="col-sm-3">
                        <div class="table-item table-header feature-box">
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 01</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 02</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 03</p>
                        </div>
                    </div>
                    <div class="col-sm-3 company-01">
                        <div class="table-item table-header feature-box">
                            <h2>Company 01</h2>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 01</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 02</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 03</p>
                        </div>
                    </div>
                    <div class="col-sm-3 company-02">
                        <div class="table-item table-header feature-box">
                            <h2>Company 02</h2>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 01</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 02</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 03</p>
                        </div>
                    </div>
                    <div class="col-sm-3 company-03">
                        <div class="table-item table-header feature-box">
                            <h2>Company 03</h2>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 01</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 02</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 03</p>
                        </div>
                    </div>
                    <div class="col-sm-3 company-04">
                        <div class="table-item table-header feature-box">
                            <h2>Company 04</h2> <!-- Fixed typo here -->
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 01</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 02</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 03</p>
                        </div>
                    </div>
                    <div class="col-sm-3 company-05">
                        <div class="table-item table-header feature-box">
                            <h2>Company 05</h2>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 01</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 02</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 03</p>
                        </div>
                    </div>
                    <div class="col-sm-3 company-06">
                        <div class="table-item table-header feature-box">
                            <h2>Company 06</h2>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 01</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 02</p>
                        </div>
                        <div class="table-item feature-box">
                            <p>Feature 03</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-3">
                    <h3>Title</h3>
                    <ul>
                        <li><a href="">Item 01</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize tracking array with default selected companies
            let selectedCompanies = ['company-01', 'company-02', 'company-03'];
            
            // Set initial state: check boxes and activate modules
            selectedCompanies.forEach(id => {
                $('#' + id).prop('checked', true);
                $('.' + id).addClass('active');
            });

            // Unified handler for checkbox changes
            $('.selector-checkbox').on('change', function() {
                const checkboxId = this.id;
                const isChecked = $(this).is(':checked');

                if (isChecked) {
                    // Add to selected array
                    selectedCompanies.push(checkboxId);
                    
                    // Enforce max 3 selection: remove oldest if over limit
                    if (selectedCompanies.length > 3) {
                        const removedId = selectedCompanies.shift();
                        $('#' + removedId).prop('checked', false);
                        $('.' + removedId).removeClass('active');
                    }
                    
                    // Activate the newly selected module
                    $('.' + checkboxId).addClass('active');
                } else {
                    // Remove from selected array and deactivate module
                    const index = selectedCompanies.indexOf(checkboxId);
                    if (index !== -1) {
                        selectedCompanies.splice(index, 1);
                        $('.' + checkboxId).removeClass('active');
                    }
                }
            });
        });
    </script>
</body>
</html>

Key Improvements & Logic Breakdown #

• Initial State Setup: On page load, we pre-populate the tracking array with the first three companies, check their boxes, and activate their modules so they're visible by default—exactly matching your first requirement.
• Unified Event Handling: A single change listener handles all checkboxes, eliminating redundant code. We use the checkbox's ID to target the corresponding company module directly.
• Selection Limit Enforcement: When checking a new box that pushes the count over 3, we use shift() to remove the oldest entry from the array, uncheck that box, and hide its module—perfectly aligning with your "hide earliest checked" rule.
• Clean Deselection: Unchecking a box removes it from the array and hides its module immediately, no extra steps needed.
• UI Polish: Added labels to checkboxes for better usability, fixed the typo in Company 04's header, and included basic CSS to handle module visibility and clean layout.

内容的提问来源于stack exchange，提问作者owengaudion