?พัฒนาเว็บเพจ ตอนที่ 31 - JS Hide/Show (Type Select/Checkbox/Button)

#Zentref #IkaPayabaht #html5 #css #javascript
คำสั่งที่ใช้ในคลิปวิดีโอมีดังนี้
⭐กรณี Hide&show เป็น Select Option
// ประกาศตัวแปร a ให้รับค่าโดยอ้างอิงค่าจากไอดีที่ชื่อ sel
var a = document.getElementById('sel');
// ถ้าตัวแปร a หรือค่าของ select ที่รับมามีค่าเท่ากับ 1
if(a.value == "1") {
// กำหนดให้กลุ่มข้อมูลไอดี jay ให้แสดงผล ส่วน jay2 ให้ซ่อน
document.getElementById('jay').style.display = "block";
document.getElementById('jay2').style.display = "none";
}
}
⭐กรณี Hide&show เป็น Checkbox
// ประกาศตัวแปร x ให้รับค่าโดยอ้างอิงค่าจากไอดีที่ชื่อ a1 ส่วน input checkbox
var x = document.getElementById('a1');
// ประกาศตัวแปร y ให้รับค่าโดยอ้างอิงค่าจากไอดีที่ชื่อ a2 ส่วนซ่อนข้อมูล
var y = document.getElementById('a2');
// ถ้าตัวแปร x หรือตัว input checkbox มีการติ๊กถูก
if(x.checked == true) {
// กำหนดตัวแปร y ที่ซ่อนข้อมูลเอาไว้สั่งให้แสดงผล
y.style.display = "block";
} else {
// กำหนดตัวแปร y ที่ซ่อนข้อมูลเอาไว้สั่งให้ซ่อน
y.style.display = "none";
}
⭐กรณี Hide&show เป็น Button
// ประกาศตัวแปร c ให้รับค่าโดยอ้างอิงค่าจากไอดีที่ชื่อ ani
var c = document.getElementById('ani');
// ถ้าตัวแปร c หรือตัว button มีการคลิกปุ่ม
if(c.click) {
// กำหนดตัวแปร bee ที่ซ่อนข้อมูลเอาไว้สั่งให้แสดงผล
document.getElementById('bee').style.display = 'block';
}
หมายเหตุ: คำสั่งซ่อนข้อมูล style="display: none;"