Đối tượng Input Checkbox trong HTML DOM đại diện cho một phần tử HTML <input> với kiểu checkbox.
Cú pháp
Cú pháp như sau:
- Tạo một <input> với kiểu checkbox:
var checkboxObject = document.createElement(“input”); checkboxObject.type = “checkbox”;
Các thuộc tính
Ở đây, 「checkboxObject」 có thể có các thuộc tính sau:
| Thuộc tính | Mô tả |
|---|---|
| autofocus | Định nghĩa xem checkbox có được focus khi tải trang ban đầu hay không. |
| checked | Định nghĩa trạng thái của checkbox: đã chọn/chưa chọn. |
| defaultChecked | Trả về giá trị mặc định của thuộc tính checked: true/false. |
| defaultValue | Thiết lập/trả về giá trị mặc định của checkbox. |
| disabled | Định nghĩa xem checkbox bị vô hiệu hóa/kích hoạt. |
| form | Trả về tham chiếu của form bao quanh chứa checkbox. |
| indeterminate | Thiết lập/trả về trạng thái indeterminate của checkbox. |
| name | Định nghĩa giá trị thuộc tính name của một checkbox. |
| required | Định nghĩa xem checkbox có bắt buộc phải chọn để gửi form hay không. |
| type | Trả về kiểu phần tử form của checkbox. |
| value | Định nghĩa giá trị thuộc tính value của một checkbox. |
Ví dụ
Dưới đây là ví dụ về thuộc tính Input Checkbox value:
<!DOCTYPE html> <html> <head> <title>Thuộc tính Value của Checkbox</title> </head> <body> <form id="Form"> <div> Màu đỏ: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox"> </div> </form> <button onclick="changeType()">Thay đổi giá trị input checkbox</button> <div id="displayDiv"></div> <script> var valueOfInput = document.getElementById("formCheckbox"); var displayDiv = document.getElementById("displayDiv"); displayDiv.textContent = 'Giá trị: ' + valueOfInput.value; function changeType(){ if(valueOfInput.value == 'Green' && valueOfInput.checked == true){ valueOfInput.value = 'Red' displayDiv.textContent = 'giá trị: ' + valueOfInput.value; } else { displayDiv.textContent = 'Chọn checkbox để thay đổi giá trị thành red'; } } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Trước khi nhấn nút 『Thay đổi giá trị input checkbox』:
Sau khi nhấn nút 『Thay đổi giá trị input checkbox』:
Đã chọn 『Màu đỏ』 checkbox & nhấn 『Thay đổi giá trị input checkbox』:
