全选/全不选和反选做个笔记

最新推荐文章于 2023-07-18 11:18:07 发布

Monster0936

最新推荐文章于 2023-07-18 11:18:07 发布

阅读量369

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/Monster0936/article/details/77308046

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>


<body>
    <input type="checkbox" id="d1">全选/全不选<br>
    <a href="javascript:;" id="d2">反选</a>
    <form action="" id="form">
        <input type="checkbox" name="demo" value="1">
        <input type="checkbox" name="demo" value="2">
        <input type="checkbox" name="demo" value="3">
        <input type="checkbox" name="demo" value="4">
    </form>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var a = 0;
        //全选复选事件     
        $('#d1').change(function() {
                if ($(this).is(':checked')) {
                    $('#form input').prop('checked', 'checked');
                    a=4;
                    console.log(a);
                } else {
                    $('#form input').prop('checked', false);
                    a=0;
                     console.log(a);
                }
            })
            //取消一个取消全选
        $('#form input').change(function() {
            if ($(this).is(':checked')) {
                a++;
                console.log(a);
                //勾选全部自动勾选全选
                if (a == 4) {
                    $('#d1').prop('checked', 'checked')


                }
            } else {
                $('#d1').prop('checked', false)
                a--;
                console.log(a);
            }
        })
        //反选
        $('#d2').click(function(){
        	$('#form input').each(function(){
        		 if ($(this).is(':checked')) {
        		 	//prop不能直接触发change事件
        		 	 $(this).prop('checked',false).change();
        		 	 console.log(a);
        		 }else{
        		 	//prop不能直接触发change事件
        		 	$(this).prop('checked','checked').change()
        		 	console.log(a);
        		 }
        	})
        })
    </script>
</body>


</html>