JavaScript(13):用jQuery实现复选框的全、反、取选

    以下给出完整示例代码:
<!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="全选" onclick="e_check();">
    <input type="button" value="反选" onclick="r_check();">
    <input type="button" value="取消" onclick="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>
阅读更多
个人分类: JavaScript
上一篇JavaScript(12):jQuery(1)
下一篇JavaScript(14):实现jQuery的click绑定及链式编程
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭