jQuery - Displaying count number from multiselect checkboxes

1.1k Views Asked by At

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);
        };
      });
1

There are 1 best solutions below

1
On BEST ANSWER

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