jquery-全选-反选-全不选

最新推荐文章于 2019-07-01 19:37:31 发布

脚步6978

最新推荐文章于 2019-07-01 19:37:31 发布

阅读量289

点赞数

分类专栏： JavaScript 文章标签： jquery 全选反选全不选

本文链接：https://blog.csdn.net/m0_38027358/article/details/75736020

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这里写图片描述

创建视图checkbox.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
</head>
<body>
<center>
    <input type="checkbox" name="hobby[]" value="篮球">篮球
    <input type="checkbox" name="hobby[]" value="足球">足球
    <input type="checkbox" name="hobby[]" value="球球">球球
    <input type="checkbox" name="hobby[]" value="小球">小球
    <input type="checkbox" name="hobby[]" value="打球">打球
    <input type="checkbox" name="hobby[]" value="大球">大球
    <br>
    <br> 
    <button id="checkall">全选</button>
    <button id="checkturn">反选</button>
    <button id="checkno">全不选</button>
</center>
</body>
</html>
<script src="./jquery.1.12.min.js"></script>
<script>
$(function(){
    //全选
    $('#checkall').click(function(){
        var obj = $(':checkbox');
        for (var i=0;i<obj.length;i++) {
            obj[i].checked=true;
        };
    });
    //反选
    $('#checkturn').click(function(){
        var obj = $(':checkbox');
        for(var i=0;i<obj.length;i++){
            obj[i].checked = ! obj[i].checked;
        }
    });        
    //全不选
    $('#checkno').click(function(){
        var obj = $(':checkbox');
        for(var i=0;i<obj.length;i++){
            obj[i].checked = false;
        }
    }); 
})
/*$(function(){
    //全选
    $('#checkall').click(function(){
        $(':checkbox').prop('checked',true);
    });
    //全不选
    $('#checkno').click(function(){
        $(':checkbox').prop('checked','');
    });
    //反选
    $('#checkturn').click(function(){
        $(':checkbox').each(function(){
            if($(this).prop('checked')){
                $(this).removeProp('checked');
            }else{
                $(this).prop('checked','true');
            }
        });
    });
})*/
/*
//全选
    function checkAll(){
        var hobby=document.getElementsByName('hobby');
        for(var i=0; i<hobby.length; i++){
            hobby[i].checked=true;
        }
    }
        //反选
    function checkturn(){
        var hobby=document.getElementsByName('hobby');
        for(var i=0; i<hobby.length; i++){
            if(hobby[i].checked==true){
                hobby[i].checked=false;
            }else{
                hobby[i].checked=true;
            }
        }
    }
        //全不选
    function checkNo(){
        var hobby=document.getElementsByName('hobby');
        for(var i=0; i<hobby.length; i++){
            hobby[i].checked=false;
        }
    }
*/
</script>