【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]

全选全不选

界面：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
    <input type="checkbox" id="checkall" />全选/全不选
    <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="唱歌" />唱歌
    <input type="checkbox" name="items" value="读书" />读书
    <br/>
    <input type="button" id="checkall_1" value="全选"/>
    <input type="button" id="checkno" value="全不选"/>
    <input type="button" id="checkarev" value="反选"/>
    <input type="button" id="send" value="提交"/>
    <script type="text/javascript">
    //全选全不选
    $(document).ready(function(){
        $("#checkall").click(function(){
            if (($("#checkall").prop("checked"))){
            $(":input[name='items']").attr("checked",true);
            }else{
            $(":input[name='items']").attr("checked",false);
            }
        });
    });
    //全选
    $(document).ready(function(){
        $("#checkall_1").click(function(){            
            $(":input[name='items']").attr("checked",true);
        });
    });    
    //全不选
    $(document).ready(function(){
        $("#checkno").click(function(){    
        //方式一        
            $(":input[name='items']").attr("checked",false);
        //方式二
            // $("input[name='checkbox']").removeAttr("checked"); 
        });
    });
    //反选
    $(document).ready(function(){
        $("#checkarev").click(function(){
        $("input[name='items']").each(function(){    
        //attr
        //1.attr("checked"):返回被选中元素的属性值    
        //2.attr("checked",true)：设置选中属性    
            if (this.checked) {
                $(this).prop("checked",false);
            }else{
                $(this).prop("checked",true);
            }
            });
        });
    });
    </script>
</body>
</html>

 

posted @ 2018-02-09 11:17  花花妹子。  阅读(323)  评论(0)  编辑  收藏  举报