Computer >> Máy Tính >  >> Lập trình >> Javascript

Sử dụng jQuery để nhận giá trị của các hộp kiểm đã chọn?

Có, chúng ta có thể sử dụng jQuery để lấy giá trị của các hộp kiểm đã chọn bằng cách sử dụng khái niệm đầu vào. Chúng tôi cũng nên sử dụng:bộ chọn đã chọn.

Ví dụ

Sau đây là mã -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<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>
<body>
   <input type="checkbox" name="checkDemo" id="check1" value="Cricket" />
   <label for="check1">Cricket</label>
   <input type="checkbox" name="checkDemo" id="check2" value="Listening Music" />
   <label for="check2">Listening Music</label>
<input type="checkbox" name="checkDemo" id="check3" value="Reading NewsPaper" />
<label for="check3">Reading NewsPaper</label>
<br>
<button type="button">Click Me</button>
<script>
   $(document).ready(function () {
      $("button").click(function () {
         $('input[name="checkDemo"]:checked').each(function () {
            console.log(this.value);
         });
      });
   });
</script>
</html>

Để chạy chương trình trên, hãy lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng máy chủ trực tiếp” trong trình chỉnh sửa Mã VS.

Điều này sẽ tạo ra kết quả sau -

Sử dụng jQuery để nhận giá trị của các hộp kiểm đã chọn?

Bây giờ, hãy chọn hộp kiểm -

Sử dụng jQuery để nhận giá trị của các hộp kiểm đã chọn?

Điều này sẽ tạo ra kết quả sau trên bảng điều khiển -

Sử dụng jQuery để nhận giá trị của các hộp kiểm đã chọn?