Bỏ chọn nhiều hộp kiểm khi nhấp nút trong jQuery

Để làm điều này, hãy sử dụng jQuery() với thuộc tính id. Dưới đây là mã:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
  .changeColor { color: red };
</style>
</head>
<body>
<input type="button" id="selectDemo" value="Muốn Chọn Tất Cả Giá Trị" />
<table>
<tr>
<td>
<input type="checkbox" id="CheckBoxId1" class="isSelected" /> Javascript
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId2" class="isSelected" /> MySQL
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId3" class="isSelected" /> MongoDB
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="CheckBoxId4" class="isSelected" /> Python
</td>
</tr>
</table>
<script>
  jQuery("#selectDemo").click(function() {
    jQuery(this).toggleClass("changeColor");
    if (jQuery(this).hasClass("changeColor")) {
      jQuery(".isSelected").prop("checked", true);
      jQuery(this).val("Muốn Bỏ Chọn Tất Cả Giá Trị");
    } else {
      jQuery(this).removeClass("changeColor");
      jQuery(".isSelected").prop("checked", false);
      jQuery(this).val("Muốn Chọn Tất Cả Giá Trị");
    }
  });
</script>
</body>
</html>

Để chạy chương trình trên, lưu tệp với tên "anyName.html (index.html)" và nhấp chuột phải vào tệp. Chọn tùy chọn "Open with Live Server" trong trình soạn thảo VS Code.

Kết quả

Chương trình sẽ cho ra kết quả sau:

Bây giờ tôi sẽ nhấp nút "Muốn Chọn Tất Cả Giá Trị":

Nhấp nút "Muốn Bỏ Chọn Tất Cả Giá Trị":