ให้เรตสมาชิก: 2 / 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ลืมรหัส เบอร์เก่าเปลี่ยน ใช้งานhotmailไม่ได้
โดย Anonymous ส 14 ธ.ค. 2019 11:11 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
13
ส 14 ธ.ค. 2019 11:11 pm โดย บุคคลทั่วไป
วิธีการดึงข้อมูลปลั็กอินจาก field ที่ผู้ใช้กรอกในไฟล์ xml มาในไฟล์ php
โดย jamepiyawat ส 14 ธ.ค. 2019 5:56 pm บอร์ด Joomla Developing Knowledge
0
11
ส 14 ธ.ค. 2019 5:56 pm โดย jamepiyawat
VDO - MDfiles Version 1.3.46
โดย numtan5839 ส 14 ธ.ค. 2019 5:46 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
12
ส 14 ธ.ค. 2019 6:37 pm โดย numtan5839
สอบถามการเปลี่ยน templete บนเว็บ minndphp หน่อยค่ะ
โดย nnamfon.26 ส 14 ธ.ค. 2019 1:39 pm บอร์ด MindPHP News & Feedback
2
25
ส 14 ธ.ค. 2019 1:48 pm โดย nnamfon.26
VDO - Calculation program after including VAT
โดย numtan5839 ส 14 ธ.ค. 2019 10:27 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
9
ส 14 ธ.ค. 2019 11:09 am โดย thatsawan
งานประจำวันที่ 14 ธันวาคม 2562
โดย numtan5839 ส 14 ธ.ค. 2019 10:13 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
7
ส 14 ธ.ค. 2019 7:01 pm โดย numtan5839
วิธีการกำหนด css ให้กับ คลาสแบบ !important โดยใช้งาน JQuery
โดย Ittichai_chupol ศ 13 ธ.ค. 2019 5:53 pm บอร์ด Jquery & Ajax Knowledge
0
17
ศ 13 ธ.ค. 2019 5:53 pm โดย Ittichai_chupol
โปรแกรมคำนวณภาษีมูลค่าเพิ่มหลังรวม VAT
โดย prmindphp ศ 13 ธ.ค. 2019 5:31 pm บอร์ด MindPHP News & Feedback
0
16
ศ 13 ธ.ค. 2019 5:31 pm โดย prmindphp
กาลครั้งหนึ่ง ของโปรแกรมเมอร์ฝึกหัด ???
โดย chatee supasand ศ 13 ธ.ค. 2019 4:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
ศ 13 ธ.ค. 2019 4:03 pm โดย chatee supasand
โปรแกรมเมอร์ คนแรกของโลก คือใคร?
โดย noppadonsk ศ 13 ธ.ค. 2019 3:18 pm บอร์ด Share Knowledge
0
21
ศ 13 ธ.ค. 2019 3:18 pm โดย noppadonsk
RGB กับ CMYK ให้สีแตกต่างกันอย่างไร
โดย noppadonsk ศ 13 ธ.ค. 2019 3:01 pm บอร์ด Share Knowledge
0
9
ศ 13 ธ.ค. 2019 3:01 pm โดย noppadonsk
SECUMAIL เทคโนโลยีป้องกันการ Hack อีเมล
โดย noppadonsk ศ 13 ธ.ค. 2019 2:32 pm บอร์ด Share Knowledge
0
20
ศ 13 ธ.ค. 2019 2:32 pm โดย noppadonsk
VDO - Introducing to Plugin Content MChangelog
โดย numtan5839 ศ 13 ธ.ค. 2019 1:33 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
23
ส 14 ธ.ค. 2019 2:55 pm โดย mindphp
Teamviewer 15 ใช้งาน TeamViewer Pilot ได้แล้วบน PC
โดย chatee supasand ศ 13 ธ.ค. 2019 12:09 pm บอร์ด Microsoft Office Knowledge & line & Etc
1
21
ศ 13 ธ.ค. 2019 1:38 pm โดย rihankhan
VDO โปรแกรมคำนวณภาษีมูลค่าเพิ่มหลังรวม VAT
โดย numtan5839 ศ 13 ธ.ค. 2019 10:05 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
22
ส 14 ธ.ค. 2019 5:42 pm โดย mindphp
icon ธงภาษาไม่แสดง
โดย numtan5839 ศ 13 ธ.ค. 2019 9:48 am บอร์ด MindPHP News & Feedback
0
28
ศ 13 ธ.ค. 2019 9:48 am โดย numtan5839
งานประจำวันที่ 13 ธันวาคม 2562
โดย numtan5839 ศ 13 ธ.ค. 2019 9:27 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
26
ศ 13 ธ.ค. 2019 7:33 pm โดย numtan5839
งานประจำวันที่ 13 ธันวาคม 2562
โดย noppadonsk ศ 13 ธ.ค. 2019 9:03 am บอร์ด MT36 - นายนพดล สุชญากูล
14
49
ส 14 ธ.ค. 2019 11:57 am โดย jamepiyawat
Plugin Content MChangeLog ใน Joomla เป็นตัวช่วยให้ เพิ่มเนื้อหาที่มีการเปลี่ยนแปลงแบบ เพิ่มเนื้อหา อัพเดด fix ปัญหา
โดย prmindphp พฤ 12 ธ.ค. 2019 6:46 pm บอร์ด MindPHP News & Feedback
0
39
พฤ 12 ธ.ค. 2019 6:46 pm โดย prmindphp
วิธีการเขียน SQL สำหรับเปลี่ยน Collation เพื่อปรับเปลี่ยนการรองรับภาษา ใน ตารางฐานข้อมูล
โดย Ittichai_chupol พฤ 12 ธ.ค. 2019 4:17 pm บอร์ด SQL Knowledge
0
22
พฤ 12 ธ.ค. 2019 4:17 pm โดย Ittichai_chupol