JQuery Hide and Show Text based on Checkbox Selected

Question

I have a table that is loaded as a partial, I have AJAX callbacks to load the table when either the pagination is selected or display number of items. I would like to hide the text until a checkbox is selected. Then show the text which has a count, and a total count of records in the table. The second part is that I have a link that when pressed allows you to select all items in the table.

I need some help with this, some of my Jquery:

 $(".individual").on("change", check);

        function check() {
            $(".records-selected").hide();
            $("#selected").text($(".individual:checked").length);
            $("#total").text($(".individual").length);
        }
        check();

Text:

<li><p class="records-selected"><span id="selected"></span> of <span id="total"></span> records selected</li>
            <li><a href="#" class="number-records">Select All 29 Records</a></li>

Each checkbox has a class of individual and the select all has a class of selectall

I also need to disable a button called .btn2 if one checkbox is selected. Then if multiple checkboxes are selected then .btn1 is enabled and .btn2 is disabled.

Any idea on the best way to do this?

Answer 1

// Checks individual checkboxes and displays the count
    $(".individual").on("change", check);

    function check() {
        if ($(".individual:checked").length > 0) {
            $(".records-selected").show();
            $("#selected").text($(".individual:checked").length);
            $("#total").text($(".individual").length);
        }
        else {
            $(".records-selected").hide();
        }
    }
    check();