html tag thead effect javascript to run

Question

I have a table. The items in the thead contains one checkbox. If I click the check box "selectAll" it checks all the checkboxes in the table. I had to add jquery tablesorter. For that purpose I had to use thead . My javascript stopped working because of thead. If I remove thead it works fine and clicking the checkbox checks all the other checkboxes in the table.

My html is:

<thead>
<tr>
<th id="idCheckBox"><input type="checkbox" id="selectAll"/> All</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th id="idEsc">Column 4</th>
<th>Column 5</th>
<th id="idComments">Column 6</th>
<th id="idSuspend">Column 7</th>
</tr>
</thead>

My java script function is:

$( function() {
    // add multiple select / deselect functionality
    $("#selectAll").click( function() {
        $('.case').attr('checked', this.checked);
    });

    $(".case").click( function() {

        if ($(".case").length == $(".case:checked").length) {
            $("#selectAll").attr("checked", "checked");
        } else {
            $("#selectAll").removeAttr("checked");
        }
    });
});

Any gurus out there for help?

Cheers

Answer 1

I don't think it is because of thead . Use .prop() to set the checked property value

$(function () {
    // add multiple select / deselect functionality
    $("#selectAll").click(function () {
        $cases.prop('checked', this.checked);
    });

    var $cases = $(".case").click(function () {
        $("#selectAll").prop("checked", $cases.not(':checked').length == 0);
    });
});

Demo: Fiddle

Answer 2

I fixed the problem by adding a function name in the javascript and by calling it on onclick event of checkbox.

My html is:

<th id="idCheckBox"><input type="checkbox" id="selectAll" onclick="selectCheckBoxes()"/> All</th>

and java script:

function selectCheckBoxes(){
    // add multiple select / deselect functionality
    $("#selectAll").click( function() {
        $('.case').attr('checked', this.checked);
    });

    $(".case").click( function() {

        if ($(".case").length == $(".case:checked").length) {
            $("#selectAll").attr("checked", "checked");
        } else {
            $("#selectAll").removeAttr("checked");
        }
    });
};