ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

 

     Radio Button คือ GUI Widget (โปรแกรมขนาดเล็กหรือการใช้ภาพประสานกับผู้ใช้โดยผ่านคอมพิวเตอร์ เช่น CheckboxText, Boxlink ) โดย 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 26 มิถุนายน 2562
โดย jamepiyawat พ 26 มิ.ย. 2019 10:01 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
1
พ 26 มิ.ย. 2019 10:01 am โดย jamepiyawat
งานประจำวันที่ 26 มิถุนายน 2562
โดย EyePornnipa พ 26 มิ.ย. 2019 10:00 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
2
พ 26 มิ.ย. 2019 10:00 am โดย EyePornnipa
งานประจำวันที่ 26 มิถุนายน 2562
โดย chatee supasand พ 26 มิ.ย. 2019 9:59 am บอร์ด MT33 - นายชาตรี สุภาแสน
0
1
พ 26 มิ.ย. 2019 9:59 am โดย chatee supasand
งานประจำวันที่ 26 มิถุนายน 2562
โดย jirawoot พ 26 มิ.ย. 2019 9:59 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
3
พ 26 มิ.ย. 2019 9:59 am โดย jirawoot
Raspberry ออกรุ่นใหม่แล้ว พบกับ Raspberry Pi 4 โมเมล B
โดย mindphp พ 26 มิ.ย. 2019 9:32 am บอร์ด MindPHP News
0
3
พ 26 มิ.ย. 2019 9:32 am โดย mindphp
Error ตอนติดตั้ง JoomShopping
โดย Anonymous พ 26 มิ.ย. 2019 5:02 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
7
25
พ 26 มิ.ย. 2019 6:12 am โดย บุคคลทั่วไป
สรุปความรู้ Flask
โดย chatee supasand อ 25 มิ.ย. 2019 7:26 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
1
อ 25 มิ.ย. 2019 7:26 pm โดย chatee supasand
วิธีทำใช้คำสั่ง strpos เพื่อตรวจสอบคำให้ถูกต้อง
โดย jamepiyawat อ 25 มิ.ย. 2019 6:23 pm บอร์ด PHP Knowledge
1
16
อ 25 มิ.ย. 2019 7:10 pm โดย thatsawan
การใช้งาน Anto Platform + สร้าง Thing ทำงานร่วมกับไฟ LED
โดย Patipat อ 25 มิ.ย. 2019 6:56 pm บอร์ด IOT - Internet of things
0
7
อ 25 มิ.ย. 2019 6:56 pm โดย Patipat
ภาษีเงินได้หัก ณ ที่จ่ายออกแทน
โดย EyePornnipa อ 25 มิ.ย. 2019 6:05 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
อ 25 มิ.ย. 2019 6:05 pm โดย EyePornnipa
Q - อยากทราบ สูตรคำนวนสินเชื่อบ้าน ครับ
โดย Patipat อ 25 มิ.ย. 2019 6:02 pm บอร์ด Programming - PHP
0
7
อ 25 มิ.ย. 2019 6:02 pm โดย Patipat
PayPal คืออะไร?
โดย jirawoot อ 25 มิ.ย. 2019 5:18 pm บอร์ด Share Knowledge
0
9
อ 25 มิ.ย. 2019 5:18 pm โดย jirawoot
สรุปความรู้ XML
โดย chatee supasand อ 25 มิ.ย. 2019 4:30 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
3
อ 25 มิ.ย. 2019 4:30 pm โดย chatee supasand
ศึกษาเรียนรู้ SQL
โดย jirawoot อ 25 มิ.ย. 2019 3:44 pm บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
2
อ 25 มิ.ย. 2019 3:44 pm โดย jirawoot
PROMPT PAY (พร้อมเพย์) คืออะไร
โดย EyePornnipa อ 25 มิ.ย. 2019 3:40 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
19
อ 25 มิ.ย. 2019 3:40 pm โดย EyePornnipa
สินเชื่อบ้านแลกเงิน คืออะไร
โดย Patipat อ 25 มิ.ย. 2019 3:33 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
อ 25 มิ.ย. 2019 3:33 pm โดย Patipat
วิธีการสร้าง link ใน ajax สำหรับใช้งานร่วมกับ phpbb
โดย Ittichai_chupol อ 25 มิ.ย. 2019 3:28 pm บอร์ด PHP Knowledge
0
7
อ 25 มิ.ย. 2019 3:28 pm โดย Ittichai_chupol
ทำความรู้จักกับ Relay Module
โดย Patipat อ 25 มิ.ย. 2019 1:57 pm บอร์ด IOT - Internet of things
0
7
อ 25 มิ.ย. 2019 1:57 pm โดย Patipat
ศึกษาเรียนรู้ XML
โดย jirawoot อ 25 มิ.ย. 2019 12:19 pm บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
4
อ 25 มิ.ย. 2019 12:19 pm โดย jirawoot
อยากทราบวิธีที่จะบังคับให้ผู้ใช้กรอกข้อความที่เราต้องการเท่านั้น
โดย jamepiyawat อ 25 มิ.ย. 2019 12:19 pm บอร์ด Programming - PHP
5
38
อ 25 มิ.ย. 2019 7:28 pm โดย jamepiyawat