Styling table rows + hovering + select checkboxes

Here the following operations will be done: * Styling even rows * Hovering effect when placing the mouse over a row * Change the color of a row when clicking on it or on its related checkbox. * Implementing a "check all" checkbox. It has only one problem: * If you first click the "check all" checkbox, the other checkboxes will be checked, but the color of the rows won't change. Unfortunately the "check all" checkbox will only work if you click on a row or on another checkbox

by Anik Islam Abhi

HTML

<form method="post">
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="check_all" />
                </th>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Row1, Col1</td>
                <td>Row1, Col2</td>
                <td>Row1, Col3</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Row2, Col1</td>
                <td>Row2, Col2</td>
                <td>Row2, Col3</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Row3, Col1</td>
                <td>Row3, Col2</td>
                <td>Row3, Col3</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Row3, Col1</td>
                <td>Row3, Col2</td>
                <td>Row3, Col3</td>
            </tr>
        </tbody>
    </table>
</form>

CSS

.even_row {
    background-color: #FF7070;
    color: #FFFFFF;
}
tr:hover {
    background-color:#FF0000;
    color: #FFFFFF;
}
.selected_row {
    background-color: #AA0000 !important;
    color: #FFFFFF;
}
thead tr {
    color: #FFFFFF;
    background-color: #CC0000;
    cursor: pointer;
    * cursor: hand;
}
tr {
    cursor: pointer;
    * cursor: hand;
}

JavaScript

$(function () {
    //Add the style: 'even_row' for even rows
    $('table tbody tr:even').addClass('even_row');

    //On mouse hover, add the style: 'highlight_row'. When the mouse
    //goes out, remove it


    $("#check_all").change(function () {
        //First the checkbox statuses will be changed according to
        //the status of the master checkbox
        $('input:checkbox').prop('checked', this.checked);
        //Then the change event defined below will be triggered. By
        //doing this, the row color will be changed according to the
        //checkbox status
        $('tr').toggleClass("selected_row", this.checked)
    });

    //This changes the color of a row and the checkbox status
    //whenever the user clicks on the row or the checkbox.
    //In order to exclude the header row, it will be applied only to the
    //tbody tr selector. The 'check_all' check box must be excluded as well
    //in order to not change the color of the header row.
    $('table tbody :checkbox').change(function (event) {
        $(this).closest('tr').toggleClass("selected_row", this.checked);
    });
    $('table tbody tr').click(function(event) {
					if (event.target.type !== 'checkbox') {
						$(':checkbox', this).trigger('click');
					}
					$("input[type='checkbox']").not('#check_all').change(function(e) {
						if($(this).is(":checked")){
							$(this).closest('tr').addClass("selected_row");
						}else{
							$(this).closest('tr').removeClass("selected_row");
						}
					});
				});
    
});