jQuery-全选反选全不选功能

最新推荐文章于 2018-07-03 15:48:28 发布

Cool__King

最新推荐文章于 2018-07-03 15:48:28 发布

阅读量174

点赞数 1

分类专栏： HTML 文章标签： jQuery

本文链接：https://blog.csdn.net/cool__king/article/details/80806675

版权

HTML 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>全选反选功能</title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script>
        //文档就绪函数
        $(function () {
            //全选功能
            $("#btn1").click(function () {
                $("body :checkbox").prop("checked", true);
            })
            //反选功能
            $("#btn2").click(function () {
                $("body :checkbox").each(function () {
                    $(this).prop("checked", !$(this).prop("checked"));
                });
                allchk();
            });
            //全不选功能
            $("#btn3").click(function () {
                $("input[type='checkbox']").removeAttr("checked");
            })
        })
    </script>
</head>
<body>
    <!--按钮选项-->
    <input type="checkbox" id="cbx1" value="1" />LOL<br />
    <input type="checkbox" id="cbx1" value="2" />地下城<br />
    <input type="checkbox" id="cbx1" value="3" />堡垒之夜<br />
    <input type="checkbox" id="cbx1" value="4" />吃鸡<br />
    <input type="checkbox" id="cbx1" value="5" />世界杯<br />
    <hr />
    <!--选项按钮-->
    <input id="btn1" type="button" value="全选" />
    <input id="btn2" type="button" value="反选" />
    <input id="btn3" type="button" value="全不选" />
</body>
</html>

Cool__King

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery-全选反选全不选功能

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;全选反选功能&lt;/title&gt; &lt;meta chars
复制链接

扫一扫