Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Trong bài thực hành này, chúng ta sẽ tìm hiểu cách hiển thị một hộp text khi hộp checkbox được checked bằng HTML, CSS và JavaScript.
Bước 1) Thêm HTML:
Ví dụ
<label class="checkBox">Check Box: <input id="checkbox" type="checkbox" /> <span class="check"></span> <span class="showText">Check box is: Checked</span> </label>
Bước 2) Thêm CSS:
Ví dụ
/* Định vị tương đối vùng chứa */ .checkBox { position:relative; display:inline-block; cursor:pointer; user-select:none; } /* Tạo kiểu phần tử input */ .checkBox > input { width:0; height:0; opacity:0; } /* Tạo kiểu cho lớp check */ .checkBox > .check { position:absolute; display:inline-block; top:-2px; right:-25px; width:24px; height:24px; border-radius:2px; background-color:#ccc; } /* Tạo kiểu cho đấu tick của lớp check */ .checkBox > .check:after { position:absolute; content:""; width:4px; height:10px; top:1px; left:8px; border:3px solid; border-color:transparent white white transparent; transform:rotate(45deg); display:none; } /* Thay đổi màu nền khi phần tử input được check */ .checkBox > input:checked + .check { background-color:dodgerblue; } /* Hiện dấu tick khi phần tử input được check */ .checkBox > input:checked + .check:after { display:block; } /* Tạo kiểu cho hộp text và ẩn mặc định */ .checkBox > .showText { position:absolute; display:inline-block; top:-60%; right:-250px; padding:15px; width:200px; text-align:center; background-color:#555; color:white; border-radius:5px; display:none; }
Bước 3) Thêm JavaScript:
Ví dụ
<script> // Khai báo và lấy các thông số thuộc tính var checkBox, checkbox, showText; checkBox = document.getElementsByClassName('checkBox')[0]; checkbox = document.getElementById('checkbox'); showText = document.getElementsByClassName('showText')[0]; // Gán sự kiện show hộp text khi checkbox được checked checkBox.onclick = function() { if(checkbox.checked == true) { showText.style.display = "block"; }else{ showText.style.display = "none"; } } </script>