JQuery实现全选全不选效果

最新推荐文章于 2021-08-19 19:06:16 发布

albert_lz

最新推荐文章于 2021-08-19 19:06:16 发布

阅读量684

点赞数

文章标签： jquery input function javascript button null

本文链接：https://blog.csdn.net/albert_lz/article/details/6305579

版权

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script language="JavaScript" src="../js/jquery-1.4.2.js">
        </script>
    </head>
    <body>
        <form method="post" action="">
            <br>
            <br>
            <br>
              <input type="checkbox" name="items" value="足球"/>足球
              <input type="checkbox" name="items" value="篮球"/>篮球
              <input type="checkbox" name="items" value="游泳"/>游泳
              <input type="checkbox" name="items" value="唱歌"/>唱歌
            <br/>
            <br/>
            <br>
            <input type="checkbox" id="myCheck"/>全选/全不选
            <br/>
            <br/>
            <input type="button" id="CheckedAll" value="全　选"/><input type="button" id="CheckedNo" value="全不选"/><input type="button" id="CheckedRev" value="反　选"/>
        </form>
    </body>
    <script language="JavaScript">
        //全选/全不选
        $("#myCheck").click(function(){
            if (this.checked) {
                $("input[name='items']").attr("checked", "checked");
            }
            else {
                $("input[name='items']").attr("checked", null);
            }
        });
        //全　选
        $("#CheckedAll").click(function(){
            $("input[name='items']").attr("checked", "checked");
        });
        //全不选
        $("#CheckedNo").click(function(){
            $("input[name='items']").attr("checked", null);
        });
        //反　选
        $("#CheckedRev").click(function(){
            $("input[name='items']").each(function(index, domElem){

                if (this.checked) {
                    $(domElem).attr("checked", null);
                }
                else {
                    $(domElem).attr("checked", "checked");
                }
            });
        });
    </script>
</html>