复选按钮全选

最新推荐文章于 2023-02-10 17:25:55 发布

阿聪世家

最新推荐文章于 2023-02-10 17:25:55 发布

阅读量522

点赞数

分类专栏：网站常用jquery效果文章标签： web前端开发 jQuery

本文链接：https://blog.csdn.net/congcong875/article/details/49027391

版权

网站常用jquery效果专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8"/>
    <title>复选按钮全选</title>
</head>
<script src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#checkedAll").click(function () {

            if (this.checked) {
                $("input[name='checkbox_name']").attr("checked", true);
            } else {
                $("input[name='checkbox_name']").attr("checked", false);
            }
           /* 另外一种方式
             if ($(this).attr("checked")) { // 全选

             $("input[name='checkbox_name']").each(function () {
             $(this).attr("checked", true);
             });
             }
             else { // 取消全选

             $("input[name='checkbox_name']").each(function () {
             $(this).attr("checked", false);
             });
             }*/
        });

    });

</script>

<body>
<input type="checkbox" name="checkbox_name" id="checkbox_name_1"/>1<br/>
<input type="checkbox" name="checkbox_name" id="checkbox_name_2"/>2<br/>
<input type="checkbox" name="checkbox_name" id="checkbox_name_3"/>3<br/>
<input type="checkbox" name="checkbox_name" id="checkbox_name_4"/>4<br/>

<input type="checkbox" name="checkedAll" id="checkedAll"/>全选/取消全选
</body>
</html>