jquery之属性attr removeAttrprop

Posted 花花妹子最努力~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery之属性attr removeAttrprop相关的知识,希望对你有一定的参考价值。

全选全不选

界面:

代码:

<!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>

 

以上是关于jquery之属性attr removeAttrprop的主要内容,如果未能解决你的问题,请参考以下文章

jquery之prop和attr区别

jQuery之attr()和prop()的区别

jQuery之attr()和prop()的区别

jQuery之元素操作及事件绑定

jQuery之元素操作及事件绑定

jQuery选择器之属性筛选选择器