Github:checkbox
一. 需求
设计一个多复选框的功能,要求用按钮选择复选框:
- 全选
- 全取消
提示:找到复选框的 checked
属性
二. 代码
checkbox.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多复选框的功能:全选/全取消</title>
</head>
<body>
<button id="select">select all</button>
<button id="cancel">cancel all</button><br />
<input type="checkbox" class="item"/>item1<br />
<input type="checkbox" class="item"/>item2<br />
<input type="checkbox" class="item"/>item3<br />
<input type="checkbox" class="item"/>item4<br />
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="checkbox.js"></script>
</html>
checkbox.js
$(document).ready(function() {
$("button#select").click(function() {
$("input.item").prop("checked", true);
});
$("button#cancel").click(function() {
$("input.item").prop("checked", false);
});
});
三. 效果
-
默认
-
点击 “select all”
-
点击 “cancel all”