06/04/2021, 14:48
ạo check all và uncheck all trong Javascript - Bài tập Javascript
Thông thường khi xây dựng chức năng quản lý danh sách dữ liệu thì mỗi record ta sẽ bổ sung một nút checkbox để khi người dùng muốn xóa record nào thì chỉ cần checked vào record đó. Để làm được chức năng này thì bạn phải kết hợp cả Javascript và ngôn ngữ Server như PHP, JSP, ASP ... Tuy nhiên trong ...
Như ta biết để thiết lập checked cho một checkbox thì ta sẽ dựa vào giá trụ TRUE/FALSE của thuộc tính checked. Nhưng vấn đề là ta phải thiết lập cho nhiều checkbox nên cần phải sử dụng DOM để lấy danh sách các checkbox, sau đó lặp qua từng checkbox để thay đổi trạng thái checked.
Trước tiên mình tạo giao diện như sau:
Giao diện
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Example</title>
</head>
<body>
<h2>Tạo check all và uncheck all trong Javascript</h2>
<table border='1' cellspacing='0' cellpadding='10'>
<tr style="font-weight: bold">
<td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
<td>Nguyễn Văn Cường</td>
</tr>
<tr style="font-weight: bold">
<td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
<td>Vũ Thị Thu Tình</td>
</tr>
<tr style="font-weight: bold">
<td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
<td>Nguyễn Văn Thiên</td>
</tr>
<tr style="font-weight: bold">
<td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
<td>Nguyễn Thị Thanh Thu</td>
</tr>
</table>
<br/>
<br/>
<input type="button" id="btn1" value="Chọn hết"/>
<input type="button" id="btn2" value="Bỏ chọn"/>
</body>
</htmlBây giờ ta sẽ bổ sung một chút Javascript, nhớ là đặt nó phía dưới các checkbox nhé.
Toàn bộ chương trình
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Example</title>
</head>
<body>
<h2>Tạo check all và uncheck all trong Javascript</h2>
<table border='1' cellspacing='0' cellpadding='10'>
<tr style="font-weight: bold">
<td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
<td>Nguyễn Văn Cường</td>
</tr>
<tr style="font-weight: bold">
<td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
<td>Vũ Thị Thu Tình</td>
</tr>
<tr style="font-weight: bold">
<td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
<td>Nguyễn Văn Thiên</td>
</tr>
<tr style="font-weight: bold">
<td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
<td>Nguyễn Thị Thanh Thu</td>
</tr>
</table>
<br/>
<br/>
<input type="button" id="btn1" value="Chọn hết"/>
<input type="button" id="btn2" value="Bỏ chọn"/>
<script language="javascript">
// Chức năng chọn hết
document.getElementById("btn1").onclick = function ()
{
// Lấy danh sách checkbox
var checkboxes = document.getElementsByName('name[]');
// Lặp và thiết lập checked
for (var i = 0; i < checkboxes.length; i++){
checkboxes[i].checked = true;
}
};
// Chức năng bỏ chọn hết
document.getElementById("btn2").onclick = function ()
{
// Lấy danh sách checkbox
var checkboxes = document.getElementsByName('name[]');
// Lặp và thiết lập Uncheck
for (var i = 0; i < checkboxes.length; i++){
checkboxes[i].checked = false;
}
};
</script>
</body>
</html>
