ปุ่มตัวเลือก (radio button) กับ JavaScript
ตัวอย่างต่อไปนี้จะสร้าง radio group แบบไดนามิก และแสดงค่าที่เลือก เมื่อเลือกปุ่มตัวเลือก:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Radio Button</title>
</head>
<body>
<p>Select your size:</p>
<div id="group">
</div>
<p id="output"></p>
<script>
const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
// generate the radio groups
const group = document.querySelector("#group");
group.innerHTML = sizes.map((size) => `<div>
<input type="radio" name="size" value="${size}" id="${size}">
<label for="${size}">${size}</label>
</div>`).join(' ');
// add an event listener for the change event
const radioButtons = document.querySelectorAll('input[name="size"]');
for(const radioButton of radioButtons){
radioButton.addEventListener('change', showSelected);
}
function showSelected(e) {
console.log(e);
if (this.checked) {
document.querySelector('#output').innerText = `You selected ${this.value}`;
}
}
</script>
</body>
</html>
มันทำงานอย่างไร
ขั้นแรก กำหนดอาร์เรย์ของสตริงที่มีขนาด ในทางปฏิบัติ คุณอาจได้รับค่าเหล่านี้จากฐานข้อมูลในส่วนหลังหรือจากผลลัพธ์ของการเรียก API:
const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
ขั้นที่สอง สร้างกลุ่มวิทยุจากองค์ประกอบของอาร์เรย์ขนาด:
const group = document.querySelector('#group'); group.innerHTML = sizes .map( (size) => `<div> <input type="radio" name="size" value="${size}" id="${size}"> <label for="${size}">${size}</label> </div>` ) .join(' ');
ในรหัสนี้:
1) เลือกองค์ประกอบที่มี id #group
2) สร้าง radio group โดยใช้เมธอด map() พร้อมเทมเพลตตัวอักษร แต่ละองค์ประกอบอาร์เรย์จะสอดคล้องกับ HTML ปุ่มตัวเลือก
3) รวมสตริง HTML ของปุ่มตัวเลือกลงในสตริง HTML โดยใช้วิธี join()
4) กำหนด HTML ให้กับ innerHTML ขององค์ประกอบเอาต์พุต
ขั้นที่สาม เลือกปุ่มตัวเลือกทั้งหมดที่มีขนาดชื่อและเพิ่มตัวฟังเหตุการณ์การเปลี่ยนแปลง:
const radioButtons = document.querySelectorAll('input[name="size"]'); for (const radioButton of radioButtons) { radioButton.addEventListener('change', showSelected); }
สุดท้าย กำหนดตัวจัดการเหตุการณ์การเปลี่ยนแปลง:
function showSelected(e) { if (this.checked) { document.querySelector('#output').innerText = `You selected ${this.value}`; } }
{fullWidth}