JavaScript（13）：用jQuery实现复选框的全、反、取选

最新推荐文章于 2024-04-25 11:38:14 发布

仲永要加油呀

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量141

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_31655771/article/details/80695883

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

以下给出完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用jQuery实现复选框的全、反、取选</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>城市</th>
                <th>特产</th>
                <th>美景</th>
                <!--th是指表格表头，要加粗-->
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>武汉</td>
                <td>热干面</td>
                <td>黄鹤楼</td>
                <!--td指表格的单元格，正常字体显示即可-->
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>海口</td>
                <td>清补凉</td>
                <td>骑楼</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>重庆</td>
                <td>火锅</td>
                <td>洪崖洞</td>
            </tr>
        </tbody>
    </table>

    <input type="button" value="全选" οnclick="e_check();">
    <input type="button" value="反选" οnclick="r_check();">
    <input type="button" value="取消" οnclick="c_check();">

    <script src="../HTML_may/jquery-1.12.4.js"></script>
    <script>
        function e_check() {
            $('#tb :checkbox').prop('checked',true);
        }

        function r_check() {
            $('#tb :checkbox').each(function () {
                var r = $(this).prop('checked')?false:true;
                $(this).prop('checked',r);
            });
        }

        function c_check() {
            $('#tb :checkbox').prop('checked',false);
        }
    </script>
</body>
</html>