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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอนออกแบบปุ่ม (ฺButton) อย่างง่าย
โดย napharat079 พฤ 18 เม.ย. 2019 6:21 pm บอร์ด Graphic design
0
9
พฤ 18 เม.ย. 2019 6:21 pm โดย napharat079
ภ.ง.ด 1 คือ
โดย สริญญา สมสา พฤ 18 เม.ย. 2019 4:58 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
4
พฤ 18 เม.ย. 2019 4:58 pm โดย สริญญา สมสา
เงินกู้ยืมระยะสั้น
โดย สริญญา สมสา พฤ 18 เม.ย. 2019 2:56 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
พฤ 18 เม.ย. 2019 2:56 pm โดย สริญญา สมสา
สอบถามวิธีเช็ค Domain หน่อยค่ะ
โดย Parichat พฤ 18 เม.ย. 2019 2:01 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
7
พฤ 18 เม.ย. 2019 2:01 pm โดย Parichat
Adobe Spark คืออะไร
โดย napharat079 พฤ 18 เม.ย. 2019 12:19 pm บอร์ด Graphic design
0
14
พฤ 18 เม.ย. 2019 12:19 pm โดย napharat079
การเดินทางจากเสนานิคม 1 - กรมสรรพากรเขตจตุจักร
โดย สริญญา สมสา พฤ 18 เม.ย. 2019 12:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
พฤ 18 เม.ย. 2019 12:00 pm โดย สริญญา สมสา
งานระจำวันที่ 18 เมษายน 2562
โดย poumtip พฤ 18 เม.ย. 2019 10:04 am บอร์ด M080 - สุทธาทิพย์ อู่นาค
1
6
พฤ 18 เม.ย. 2019 7:21 pm โดย poumtip
งานประจำวันที่ 18 เมษายน 2562
โดย napharat079 พฤ 18 เม.ย. 2019 9:52 am บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
2
8
พฤ 18 เม.ย. 2019 11:32 pm โดย thatsawan
ผังบัญชี
โดย สริญญา สมสา พ 17 เม.ย. 2019 6:56 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
16
พ 17 เม.ย. 2019 6:56 pm โดย สริญญา สมสา
ความเป็นมาของบัญชี
โดย สริญญา สมสา พ 17 เม.ย. 2019 6:01 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
8
พ 17 เม.ย. 2019 6:01 pm โดย สริญญา สมสา
การปรับปรุงตั๋วเงินรับ
โดย สริญญา สมสา พ 17 เม.ย. 2019 4:33 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
11
พ 17 เม.ย. 2019 4:33 pm โดย สริญญา สมสา
ฟีเจอร์ใหม่!!! Google translate อัปโหลดเอกสารได้แล้ว
โดย napharat079 พ 17 เม.ย. 2019 4:18 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
17
พ 17 เม.ย. 2019 4:18 pm โดย napharat079
วิธีตั้งค่าวันเวลาส่ง Gmail ล่วงหน้าอัตโนมัติ
โดย napharat079 พ 17 เม.ย. 2019 3:10 pm บอร์ด Share Knowledge
0
14
พ 17 เม.ย. 2019 3:10 pm โดย napharat079
การเเก้ไขข้อผิดผลาดทางบัญชี
โดย สริญญา สมสา พ 17 เม.ย. 2019 2:16 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
พ 17 เม.ย. 2019 2:16 pm โดย สริญญา สมสา
วิธีตั้งค่าใช้งาน Google Docs ออฟไลน์
โดย napharat079 พ 17 เม.ย. 2019 11:52 am บอร์ด Microsoft Office Knowledge & line & Etc
0
20
พ 17 เม.ย. 2019 11:52 am โดย napharat079
หนี้สูญได้รับคืน
โดย สริญญา สมสา พ 17 เม.ย. 2019 11:35 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
11
พ 17 เม.ย. 2019 11:35 am โดย สริญญา สมสา
สรุปหัวข้ออบรม
โดย tsukasaz พ 17 เม.ย. 2019 10:57 am บอร์ด Diageo - Web Ordering (Main)
0
9
พ 17 เม.ย. 2019 10:57 am โดย tsukasaz
งานประจำวันที่ 17 เมษายน 2562
โดย napharat079 พ 17 เม.ย. 2019 9:53 am บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
3
9
พ 17 เม.ย. 2019 7:09 pm โดย napharat079
งานประจำวันที่ 17 เมษายน 2562
โดย poumtip พ 17 เม.ย. 2019 9:42 am บอร์ด M080 - สุทธาทิพย์ อู่นาค
2
12
พ 17 เม.ย. 2019 7:10 pm โดย poumtip
คอนโดสุดล้ำความสวย สงบ พื้นที่ส่วนตัวเพียบ คอนโดสุขุมวิท
โดย Patty Perfume จ 15 เม.ย. 2019 3:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
48
จ 15 เม.ย. 2019 3:40 pm โดย Patty Perfume