用jquery实现一个全选和反选的小案例

用jquery实现一个全选和反选的小案例

jquery-3.3.1.js

其实知识学得越多,你就会发现做的东西越来越容易一些

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="checkbox">游戏
<input type="checkbox">睡觉
<input type="checkbox">吃饭
<input type="checkbox">看书
<br>
<button>全选</button><button>反选</button>
<script type="text/javascript">

    $(function(){


        $('button').eq(0).click(function(){

            $('input[type=checkbox]').prop('checked',true);

        }).next().click(function(){

            $('input').each(function(){

                var v = $(this).prop('checked');

                $(this).prop('checked',!v);

            })

        })


    })

</script>
</body>
</html>

就这样实现了一个小小的案例,继续努力为创造一个美好的自己

猜你喜欢

转载自blog.csdn.net/stay_hungry_stay/article/details/81192951