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/falseTrong đó 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.
<!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
