Question

I have created a tool using jQuery that will show certain table rows depending on if certain checkboxes are selected. I am trying to have text that will display “3 Posters are required” for example. I am using the code below. In IE7 it is broken and instead of showing the number of < tr class=”hidden”> that are visible, it is just showing the total number of < tr class=”hidden”>. Is there anything wrong with this code?

$(".hidden").hide();

function countChecked() {
        var n = $("tr.hidden:visible").length;
        $("#numberrequired").text(n + (n <= 1 ? " Poster" : " Posters") + (n <= 1 ? "is" : " are") + " required:");
        //Error message if no checkboxes are selected
        if ($('input:checkbox:checked').length < 1) {
            $("#numberrequired").html("<span class='required_msg'>Please select at least one checkbox.</span>");
            $('#results0').hide();
            //boxes[0].focus();
            return false;
        }
    }

<h2 id="numberrequired"></h2>

Here is an example of a couple of rows:

<tr id="results1" class="hidden">
    <td>Text 1</td>
    <td>Text 2</td>
    <td>Text 3</td>
</tr>

<tr id="results2" class="hidden">
    <td>Text 1</td>
    <td>Text 2</td>
    <td>Text 3</td>
</tr>

<tr id="results3" class="hidden">
    <td>Text 1</td>
    <td>Text 2</td>
    <td>Text 3</td>
</tr>

Answer 1

This appears to be an old bug which has been fixed for about 2 years. You could upgrade your version of jquery or change your selector to this:

:not(:hidden)

This is the workaround which I found people claiming would work.

(untested as I do not have IE7)