Question

使用：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的任何问题。

你们有没有想过为什么会这样做？

提前谢谢你，吉姆

Answer 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);
    });
});

复选框，HTML 5表现不一致

1 个答案: