码迷,mamicode.com
首页 > Web开发 > 详细

【七】jquery之属性attr、 removeAttr、prop

时间:2018-02-09 15:15:53      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:als   read   http   else   bubuko   方式   反选   .com   nbsp   

全选全不选

界面:

技术分享图片

代码:

<!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、 removeAttr、prop

标签:als   read   http   else   bubuko   方式   反选   .com   nbsp   

原文地址:https://www.cnblogs.com/8013-cmf/p/8434712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!