Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

Dealing with posting large number of checkboxes

David Carr

Javascript HTML Tutorials

    When you have a form with lots of checkboxes, you may hit a limit to how many you can post. I had this issue with a form that had over 125 checkboxes I found once the limit was reached not all checkboxes could be posted.

    My solution was using jQuery to scan all checkboxes read their values then stored as a comma separated list in a hidden input.

    Let’s put this into practice below is a table of records wrapped inside a form, the top checkbox when checked all checkboxes underneath will be checked.

    Each checkbox has a value. Now the jQuery code needed to toggle the checkboxes:

    <form method="get">
    <input type='hidden' name="ids" id="ids">
    <table class='table table-striped table-hover table-bordered'>
        <thead>
            <tr>
                <th><input type="checkbox" id="selecctall" /></th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        
        <tbody>
            <?php
            foreach($contacts as $row) {
                echo "<tr>";
                    echo "<td><input type='checkbox' value='$row->id' class='checkbox' /></td>";
                    echo "<td>$row->firstName</td>";
                    echo "<td>$row->lastName</td>";
                    echo "<td>$row->email</td>";
                echo "</tr>";
            }
            ?>
        </tbody>
    </table>
    
    <p><p><button type="submit" class="btn btn-success" name="submit"><i class="fa fa-check"></i> <i class='fa fa-envelope'></i> Submit </button></p>
    </form>

    Each checkbox has a value. Now the jQuery code needed to toggle the checkboxes:

    <script type="text/javascript">
    $(document).ready(function () {
    
        //on click check each checkbox
        $('#selecctall').click(function (event) {
            if (this.checked) {
                //loop through each checkbox
                $('.checkbox').each(function () { 
                    $(this).prop('checked', true); //check 
                });
            } else {
                //loop through each checkbox
                $('.checkbox').each(function () { 
                    $(this).prop('checked', false); //uncheck              
                });
            }
    
            //collect each checkbox value
            var checkedRows = $('.checkbox:checked').map( function() {
                return this.value;
            }).get().join(",");
    
            //add the comma seperated list to the input 
            $('#ids').val(checkedRows);
    
        });
    
        //on checking a single checkbox update the comma seperated list
        $('.checkbox').change(function(){
            var checkedRows = $('.checkbox:checked').map( function() {
                return this.value;
            }).get().join(",");
    
            $('#ids').val(checkedRows);
        });
    
    });
    </script>

    Laravel Modules Book by David Carr

    Help support the blog so that I can continue creating new content!

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

    © 2009 - 2022 DC Blog. All code MIT license. All rights reserved.