复选框，HTML 5 行为不一致

使用： APS.NET MVC 4.0

我正在使用javascript/jquery来选中和取消选中表中的复选框。代码在前两次运行良好。首先通过它检查所有复选框。第二次传递它取消选中所有复选框。以下是标记和 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 的任何问题。

你们中有谁知道为什么会这样吗？

提前谢谢你，吉姆

改用.prop()：

演示小提琴

$(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);
    });
});

相关内容

最新更新

热门标签：