Count checked checkboxes with jQuery

by Alvin Olavarrieta

HTML

<div class="content">
<form action="/admin/config/development/generate/content" method="post" id="devel-generate-content-form" accept-charset="UTF-8">
<div>
<table class="sticky-enabled">
    <thead>
        <tr>
            <th class="select-all"></th>
            <th>Content type</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>
                <div class="form-item form-type-checkbox form-item-node-types-forum">
                    <input type="checkbox" id="edit-node-types-forum" name="node_types[forum]"
                    value="forum" class="form-checkbox" />
                </div>
            </td>
            <td>Forum topic</td>
            <td><small>Open</small>
            </td>
        </tr>
        <tr class="even">
            <td>
                <div class="form-item form-type-checkbox form-item-node-types-article">
                    <input type="checkbox" id="edit-node-types-article" name="node_types[article]"
                    value="article" class="form-checkbox" />
                </div>
            </td>
            <td>Article</td>
            <td><small>Open</small>
            </td>
        </tr>
        <tr class="odd">
            <td>
                <div class="form-item form-type-checkbox form-item-node-types-page">
                    <input type="checkbox" id="edit-node-types-page" name="node_types[page]"
                    value="page" class="form-checkbox" />
                </div>
            </td>
            <td>Basic page</td>
            <td><small>Hidden</small>
            </td>
        </tr>
        <tr class="even">
            <td>
                <div class="form-item form-type-checkbox form-item-node-types-test-content-type">
                    <input type="checkbox" id="edit-node-types-test-content-type" name="node_types[test_content_type]"
                    value="test_content_type" class="form-checkbox" />
                </div>
           ...

CSS

#count-checked-checkboxes,
.form-required
{
    color:red;
}

JavaScript

$(document).ready(function(){

    var $checkboxes = $('#devel-generate-content-form td input[type="checkbox"]');
        
    $checkboxes.change(function(){
        var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
        // $('#count-checked-checkboxes').text(countCheckedCheckboxes);
        
        $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
    });

});


/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////