Cách kiểm tra hộp kiểm có được chọn trong jQuery

Để kiểm tra hộp kiểm có được chọn trong jQuery, hãy sử dụng khái niệm toggle(). 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">
</head>
<body>
<input type="checkbox" id="selectName"/>
<div id="txtName" style="display:none">Your name is Adam Smith</div>
<script>
  $('#selectName').click(function() {
    $("#txtName").toggle(this.checked);
  });
</script>
</body>
</html>

Để chạy chương trình trên, chỉ cần lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp và 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:

Khi bạn chọn hộp kiểm, sau đây sẽ là kết quả: