javascriptjquerycountjquery-ui-widget

jQuery - Displaying count number from multiselect checkboxes


I'm using Eric Hynds jQuery UI MultiSelect Widget. How can I display the count number of checked check boxes in the widget instead normal checkboxes?

The below counts/displays normal checkboxes. See fiddle with widget:http://jsfiddle.net/3u7Xj/85/

<div id="status">
      <p id="count">0</p>
    </div>

$(document).ready(function () {
        $("input[type=checkbox]").each(function () {
          $(this).change(updateCount);
        });

        updateCount();

        function updateCount () {
          var count = $("input[type=checkbox]:checked").size();

          $("#count").text(count);
          $("#status").toggle(count > 0);
        };
      });

Solution

  • I am a little confused by the question. The count in your fiddle works, except that the Change event isn't called on the MultiSelects so it does no update until a regular checkbox is used.

    Adding a Change event to the multiselects right after you add the Change to the standard checkboxes worked for me.

    $(".multiselect").change(updateCount);
    

    Or even adding ".multiselect" selector to the original setup of Change will work.

    $("input[type=checkbox], .multiselect").each(function () {
          $(this).change(updateCount);
        });
    

    FIDDLE