Multiple Checkbox Select/Deselect - DEMO

by Ravi Agrawal

HTML

<h2>Multiple Checkbox Select/Deselect - DEMO</h2>

<table border="1">
    <tbody>
        <tr>
            <th>
                <input type="checkbox" id="selectall">
            </th>
            <th>Cell phone</th>
            <th>Rating</th>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="case" name="case" value="1">
            </td>
            <td>BlackBerry Bold 9650</td>
            <td>2/5</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="case" name="case" value="2">
            </td>
            <td>Samsung Galaxy</td>
            <td>3.5/5</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="case" name="case" value="3">
            </td>
            <td>Droid X</td>
            <td>4.5/5</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="case" name="case" value="4">
            </td>
            <td>HTC Desire</td>
            <td>3/5</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="case" name="case" value="5">
            </td>
            <td>Apple iPhone 4</td>
            <td>5/5</td>
        </tr>
    </tbody>
</table>

JavaScript

$(function () {
    $("#selectall").click(function () {
        $('.case').prop('checked', this.checked);
    });

    $(".case").click(function () {
        if ($(".case").length == $(".case:checked").length) {
            $("#selectall").prop("checked", "checked");
        } else {
            $("#selectall").removeProp("checked");
        }
    });
});