Thiết lập checkbox checked bằng javascript

DEMO

Cho một ô checkbox và 2 button, hãy xử lý sự kiện khi click vòa button thứ nhất thì thiết lập trạng thái checked cho checkbox, khi click vào button thứ hai thì hủy bỏ trạng thái checked cho checkbox.

Như thường lệ, đối với bài này thì ta sử dụng thuộc tính checked của đối tượng HTML để thay đổi trạng thái checked cho checkbox như sau:

document.getElementById("checkboxid").checked = true/false

Trong đó bạn có thể sử dụng các loại DOM khác chứ không bắt buôc sử dụng DOM truy vấn theo id.

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Javascript Example</title>
    </head>
    <body>
        <h2>Tạo checkbox checked bằng javascript</h2>
        <p>Hướng dẫn tạo ô checkbox checked bằng Javascript</p>

            <h4>Bạn là fanpage của freetuts.net phải không? chọn nếu phải và không chọn nếu không phải.</h4>
            <input type="checkbox" value="0" id="checkbox1" /> Vâng, đúng rồi
            
        <br/>
        <br/>
        <br/>
        <input type="button" id="btn1" value="Chọn"/>
        <input type="button" id="btn2" value="Bỏ chọn"/>

        <script language="javascript">

            document.getElementById("btn1").onclick = function () {
                document.getElementById("checkbox1").checked = true;
            };

            document.getElementById("btn2").onclick = function () {
                document.getElementById("checkbox1").checked = false;
            };

        </script>
    </body>
</html>

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM