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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 18 มิถุนายน 2562
โดย EyePornnipa อ 18 มิ.ย. 2019 10:03 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
4
อ 18 มิ.ย. 2019 10:03 am โดย EyePornnipa
งานประจำวันที่ 18 มิถุนายน 2562
โดย chatee supasand อ 18 มิ.ย. 2019 10:00 am บอร์ด MT33 - นายชาตรี สุภาแสน
0
1
อ 18 มิ.ย. 2019 10:00 am โดย chatee supasand
อยากทราบวิธีการปรับขนาดของ browser ในแสดงผลเฉพาะส่วนที่ต้องการ
โดย Ittichai_chupol จ 17 มิ.ย. 2019 7:21 pm บอร์ด Programming - PHP
0
8
จ 17 มิ.ย. 2019 7:21 pm โดย Ittichai_chupol
อยากทราบวิธีการ สร้าง css เพื่อกำหนดตำแหน่งในการแชร์
โดย Ittichai_chupol จ 17 มิ.ย. 2019 2:50 pm บอร์ด HTML CSS
6
39
จ 17 มิ.ย. 2019 6:59 pm โดย thatsawan
CPU มีความร้อนสูงทำให้คอมพิวเตอร์เสียหายจริงหรือไม่ ?
โดย Patipat จ 17 มิ.ย. 2019 6:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
จ 17 มิ.ย. 2019 6:38 pm โดย Patipat
อยากทราบวิธีสร้างกราฟ เป็นแบบ PHP Stacked Column
โดย Patipat จ 17 มิ.ย. 2019 6:11 pm บอร์ด Programming - PHP
0
10
จ 17 มิ.ย. 2019 6:11 pm โดย Patipat
วิธีการหา Error ของการ Insert ข้อมูลลงฐานข้อมูล Mysql โดยใช้ Mysql
โดย Patipat จ 17 มิ.ย. 2019 5:42 pm บอร์ด SQL Knowledge
0
10
จ 17 มิ.ย. 2019 5:42 pm โดย Patipat
เดินทางจากตัวเมืองนครศรี-วัดเจดีย์ไอ้ไข่ไปอย่างไร(รถโดยสาร)
โดย jirawoot จ 17 มิ.ย. 2019 5:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
จ 17 มิ.ย. 2019 5:23 pm โดย jirawoot
วิธีการแก้ Netbean Newproject ของ PHP ไม่ขึ้น
โดย Patipat จ 17 มิ.ย. 2019 4:27 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
จ 17 มิ.ย. 2019 4:27 pm โดย Patipat
จะเพิ่มรูปภาพเข้ามายัง เว็บบอร์ด PHP ยังไงค่ะ
โดย EyePornnipa จ 17 มิ.ย. 2019 4:14 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
22
จ 17 มิ.ย. 2019 7:10 pm โดย EyePornnipa
ให้แสดงเวลาแต่เกิด Notice: A non well formed numeric value encountered in ครับ
โดย jamepiyawat จ 17 มิ.ย. 2019 4:10 pm บอร์ด Programming - PHP
1
15
จ 17 มิ.ย. 2019 5:43 pm โดย mindphp
แหล่งท่องเที่ยวใน จ.นครศรีธรรมราช
โดย jirawoot จ 17 มิ.ย. 2019 4:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
จ 17 มิ.ย. 2019 4:00 pm โดย jirawoot
การติดตั้งโปรแกรม Nimbus บน google chrom
โดย chatee supasand จ 17 มิ.ย. 2019 3:56 pm บอร์ด Share Knowledge
1
8
จ 17 มิ.ย. 2019 3:58 pm โดย thatsawan
วิธีการแก้ไข sudo must be owned by uid 0 and have the setuid bit set บน ubuntu
โดย jamepiyawat จ 17 มิ.ย. 2019 3:25 pm บอร์ด Share Knowledge
2
18
จ 17 มิ.ย. 2019 4:04 pm โดย jamepiyawat
การเดินทางจากนครศรีธรรมราชมากรุงเทพฯ
โดย EyePornnipa จ 17 มิ.ย. 2019 3:22 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
จ 17 มิ.ย. 2019 3:22 pm โดย EyePornnipa
ทำ google เอกสาร ให้คนอื่นแก้ไข หรือ ทำให้แค่เห็นเอกสาร
โดย jamepiyawat จ 17 มิ.ย. 2019 12:10 pm บอร์ด Share Knowledge
0
16
จ 17 มิ.ย. 2019 12:10 pm โดย jamepiyawat
Skype สามารถ ใช้ร่วมกับ OneDrive ได้แล้ว
โดย chatee supasand จ 17 มิ.ย. 2019 11:49 am บอร์ด Microsoft Office Knowledge & line & Etc
0
9
จ 17 มิ.ย. 2019 11:49 am โดย chatee supasand
ประวัติส่วนตัวและความรู้ที่เคยเรียนมา
โดย jirawoot จ 17 มิ.ย. 2019 11:20 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
4
จ 17 มิ.ย. 2019 11:20 am โดย jirawoot
Job Description
โดย EyePornnipa จ 17 มิ.ย. 2019 11:17 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
21
จ 17 มิ.ย. 2019 11:17 am โดย EyePornnipa
Note
โดย jirawoot จ 17 มิ.ย. 2019 11:06 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
3
12
จ 17 มิ.ย. 2019 6:13 pm โดย jirawoot