Html Javascript Checkbox 全选/全不选

最新推荐文章于 2022-12-14 09:53:12 发布

willproud

最新推荐文章于 2022-12-14 09:53:12 发布

阅读量876

点赞数

分类专栏：网页

网页专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML：

<table id="tab1"><tr><td>
    <input type="checkbox" name="checkAll" id="checkAll">全選
    <input type="checkbox" name="book" id="book" value="book1">book1
    <input type="checkbox" name="book" id="book" value="book2">book2
    <input type="checkbox" name="book" id="book" value="book3">book3
    <input type="checkbox" name="book" id="book" value="book4">book4
    <input type="checkbox" name="book" id="book" value="book5">book5</td></tr></table>

JavaScript：

    $("#tab1 #checkAll").click(function () {
        if ($("#tab1 #checkAll").is(':checked')) {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });

        } else {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });

Demo：

http://jsfiddle.net/j08691/pzCcE/2/