Javascript | HTML | Tutorials

David Carr

Dealing with posting large number of checkboxes

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>
Domains are often purchased from multiple providers, keeping track of where a domain is and its DNS settings can be tricky. Domain Mapper solves this by listing all your domains in one place. View your DNS settings and receive reminders to renew your domains. Try it today.

Support my work by donating with PayPal.

Subscribe to my newsletter

Subscribe and get my books and product announcements.

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