CODEWITHSUNDEEP
jqueryasp.net-mvchtmlcheckbox
Jim
Jim

Reputation: 211

Checkboxes, HTML 5 not behaving consistently

Using: APS.NET MVC 4.0

I am using javascript/jquery to check and uncheck check boxes in a table. The code works fine the first two times through. First pass it checks all the check boxes. The second pass it unchecks all the check boxes. Following is the markup and javascript.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="Content/Site.css" />
    <link type="text/css" rel="stylesheet" href="Content/email.css" />

    <script type="text/javascript" src="Scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script>
</head>
<body>
    <table class="email-items">
        <thead>
            <tr class="header">
                <th class="select">
                    <input class="select" id="selectall" type="checkbox" title="Select All" />
                </th>
                <th class="to">Name:</th>
                <th class="subject">Description:</th>
                <th class="to">Email Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="select">
                        <input class="check-box" type="checkbox" name="Checked" />
                    </div>
                </td>
                <td>
                    <div class="to">Jim G</div>
                </td>
                <td>
                    <div class="subject">On Awesome Architect</div>
                </td>
                <td>
                    <div class="date">[email protected]</div>
                </td>

            </tr>
            <tr>
                <td>
                    <div class="select">
                        <input class="check-box" type="checkbox" name="Checked" />
                    </div>
                </td>
                <td>
                    <div class="to">Dale B</div>
                </td>
                <td>
                    <div class="subject">A Super Cheif</div>
                </td>
                <td>
                    <div class="date">[email protected]</div>
                </td>

            </tr>
            <tr>
                <td>
                    <div class="select">
                        <input class="check-box" type="checkbox" name="Checked" />
                    </div>
                </td>
                <td>
                    <div class="to">Oscar H</div>
                </td>
                <td>
                    <div class="subject">Selling ice cube to the eskimos</div>
                </td>
                <td>
                    <div class="date">[email protected]</div>
                </td>

            </tr>
            <tr>
                <td>
                    <div class="select">
                        <input class="check-box" type="checkbox" name="Checked" />
                    </div>
                </td>
                <td>
                    <div class="to">Crystal S</div>
                </td>
                <td>
                    <div class="subject">All together fabulous</div>
                </td>
                <td>
                    <div class="date">[email protected]</div>
                </td>

            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#selectall').click(function () {

                var checked = $('[id="selectall"]:checked').length;

                if (checked) {
                    // select all
                    $('tbody input[type="checkbox"]').attr('checked', true);
                }
                else {
                    $('tbody input[type="checkbox"]').attr('checked', false);
                }

                alert($('tbody input:checked').length);
            });
        });
    </script>

</body>
</html>

I have tried and tried, but I cannot find any issues with the markup or the javascript.

Do any of you have any idea as to why this would behave this way?

Thank you in advance, Jim

Upvotes: 0

Views: 728

Answers (1)

dc5
dc5

Reputation: 12441

Use .prop() instead:

Demo Fiddle

$(document).ready(function () {
    $('#selectall').click(function () {

        var checked = $('[id="selectall"]:checked').length;

        if (checked) {
            // select all
            $('tbody input[type="checkbox"]').prop('checked', true);
        }
        else {
            $('tbody input[type="checkbox"]').prop('checked', false);
        }

        alert($('tbody input:checked').length);
    });
});

Upvotes: 1

Related Questions