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);
});
});
三. 效果
-
默認
![1]()
-
點擊 “select all”
![2]()
-
點擊 “cancel all”
![3]()
