Nearth===>WEB前端--第26课/复选框全选全不选问题（prop()方法的使用）

最新推荐文章于 2019-11-17 10:25:38 发布

码字界陈冠希

最新推荐文章于 2019-11-17 10:25:38 发布

阅读量99

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.csdn.net/ly1716/article/details/103101113

版权

WEB前端第三季/JQuery 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

代码学习：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
		body{
					 background-image: url(0.jpg);
					 background-repeat: no-repeat;
					 background-attachment: fixed;
					 background-size: 100% 100%;
		}
    </style>
    <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
	  //两个按钮
	  //1:按钮全选
	  //2:全不选
	  $(function () {
	             $("#btn1").click(function () {
	                 $("#dv :checkbox").prop("checked",true);
	             });
	             $("#btn2").click(function () {
	                 $("#dv :checkbox").prop("checked",false);
	             });
	         });

    </script>
</head>
<body>
<h1>全选和全不选问题</h1>
<hr >
<input type="button" name="" id="btn1" value="全选" />
<input type="button" name="" id="btn2" value="全不选" />
<hr >
<div id="dv">
	<input type="checkbox" name="" id="" value="1" />吃饭
	<input type="checkbox" name="" id="" value="2" />睡觉
	<input type="checkbox" name="" id="" value="3" />打篮球
	<input type="checkbox" name="" id="" value="4" />打豆豆
	<input type="checkbox" name="" id="" value="5" />打台球
</div>
</body>
</html>