0

使用: APS.NET MVC 4.0

javascript/jquery を使用して、テーブルのチェック ボックスをオンまたはオフにしています。コードは最初の 2 回まで正常に動作します。最初のパスでは、すべてのチェック ボックスをオンにします。2 番目のパスでは、すべてのチェック ボックスをオフにします。以下は、マークアップと 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">jim@email.address</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">dale@email.address</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">oscar@email.address</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">crystal@email.address</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>

何度も試してみましたが、マークアップや JavaScript に問題は見つかりませんでした。

なぜこれがこのように振る舞うかについて、あなたの誰かが何か考えを持っていますか?

前もってありがとう、ジム

4

1 に答える 1

1

.prop()代わりに使用してください:

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);
    });
});
于 2013-09-13T23:19:03.163 に答える