Radio Button คือ GUI Widget (โปรแกรมขนาดเล็กหรือการใช้ภาพประสานกับผู้ใช้โดยผ่านคอมพิวเตอร์ เช่น Checkbox, Text, Box, link ) โดย Radio Button เป็นปุ่มเลือกที่ผู้ใช้งานสามารถเลือกได้แค่ตัวเลือกเดียวถ้ากำหนดชื่อของปุ่มชื่อเดียวกัน ไม่สามารถเลือกได้หลายตัวเลือก จะอยู่ในรูปแบบของวงกลมพื้นที่ว่าง ถ้าผู้ใช้ต้องการเลือก สามารถกดที่พื้นที่ว่างในวงกลมนั้นแล้วจะมีจุดสีดำขึ้นในกลมถือว่าผู้ใช้ได้ทำการเลือกปุ่มนั้นแล้ว โดย Checkbox กับ Radio Button คล้ายกันแต่จะแตกต่างกันอยู่คือ รูปร่างที่ Checkbox จะเป็นสี่เหลี่ยมและ Checkbox สามารถเลือกได้หลายตัวเลือก
ตัวอย่างโค้ด
<div class="input-group">
<span class="input-group" id="basic-addon">อาหารชนิดที่ 1</span>
<span class="input-group"><input type="radio" name="m1" value=" % / เดือน" id="1" onclick="myFunction('1')" checked>ของหวาน</span>
<span class="input-group"><input type="radio" name="m1" value=" % / ปี" id="2" onclick="myFunction('2')">ของคาว<br></span>
</div>
<br/>
<div class="input-group">
<span class="input-group" id="basic-addon">อาหารชนิดที่ 2</span>
<span class="input-group"><input type="radio" name="m2" value=" เดือน" id="3" onclick="myFunction('3')" checked>ของหวาน1</span>
<span class="input-group"><input type="radio" name="m2" value=" ปี" id="4" onclick="myFunction('4')">ของคาว2<br></span>
</div>
<br/>
<script>
function myFunction(p) {
if(p==1){
document.getElementById("3").checked = true;
}
if(p==3){
document.getElementById("1").checked = true;
}
if(p==2){
document.getElementById("4").checked = true;
}
if(p==4){
document.getElementById("2").checked = true;
}
}
</script>
ผลลัพธ์
เมื่อเลือกของหวาน หรือของหวาน 1
เมื่อเลือกของคาว หรือของคาว 2
อธิบาย
เมื่อผู้ใช้งานเลือก ของหวาน แล้วจะไม่สามารถเลือก ของคาว 1 ได้ เช่นเดียวกัน ถ้าเลือก ของคาว 2 จะไม่สามารถเลือกของหวาน (ผู้ใช้เลือกของหวาน จะเลือกของหวาน 1 ให้อัตโนมัติ)
เมื่อผู้ใช้งานเลือก ของคาว แล้วจะไม่สามารถเลือก ของหวาน 1 ได้ เช่นเดียวกัน ถ้าเลือก ของหวาน 1 จะไม่สามารถเลือกของคาว (ผู้ใช้เลือกของคาว จะเลือกของคาว 2 ให้อัตโนมัติ)
อ้างอิง : w3schools
ข่าวสารเพิ่มเติมเกี่ยวกับ PHP