thực hành - hiện text khi checked

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.

Hiện text khi checkbox được checked

Xem kết quả

Cách tạo hiện text khi checkbox được checked

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>