html checkbox全选实现

html

全选<input id="checkAll" type="checkbox"/> 
菜单一<input class="check" type="checkbox"/>
菜单二<input class="check" type="checkbox"/>
菜单三<input class="check" type="checkbox"/>

js代码(使用前,请引入jquery)

<script>
    //全选按钮点击事件
    $("#checkAll").click(function () {
        var flag = $("#checkAll").prop("checked");
        $(".check").each(function () {
            $(this).prop("checked", flag);
        });
    });

    //动态添加元素点击事件失效的解决办法(重要)
    $(document).on('click', '.check', function () {
        var flag = $(this).prop("checked");
        if (!flag) {
            $("#checkAll").prop("checked", flag);
        } else {
            if ($(".check").length == $(".check:checked").length) {
                $("#checkAll").prop("checked", flag);
            }
        }
    });
</script>