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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การเดินทางจากปราจีนบุรี มากรุงเทพมหานคร
โดย moo1997 จ 20 ก.ค. 2020 3:43 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
207
จ 20 ก.ค. 2020 3:43 pm โดย moo1997
CRM - Customer Relationship Management
โดย moo1997 จ 20 ก.ค. 2020 2:29 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
158
จ 20 ก.ค. 2020 2:29 pm โดย moo1997
สอบถามการหาค่าเฉลี่ยจาก timestamp ค่ะ sql
โดย Anonymous อ 19 ก.ค. 2020 5:19 pm บอร์ด Programming - PHP
1
330
จ 20 ก.ค. 2020 10:22 am โดย icphp
วิธีแก้ปัญหาตัวอักษรในใบปริ้นเอกสารจากตัวระบบห่าง ใน OpenERP / Odoo
โดย natthanit.r2538 ส 18 ก.ค. 2020 12:30 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
203
ส 18 ก.ค. 2020 12:30 pm โดย natthanit.r2538
argparse คืออะไร
โดย jirawoot พฤ 16 ก.ค. 2020 12:43 pm บอร์ด Python Knowledge
0
1743
พฤ 16 ก.ค. 2020 12:43 pm โดย jirawoot
เวอร์ชั่นใหม่มาแล้ว Joomla 3.9.20 อัพเดทความปลอดภัยหลายจุด
โดย tsukasaz พ 15 ก.ค. 2020 1:45 pm บอร์ด MindPHP News & Feedback
0
277
พ 15 ก.ค. 2020 1:45 pm โดย tsukasaz
วิธีการ การลิ้งค์ข้อมูลข้าม Sheet ใน Google Sheet คู่มือ บทความสอน
โดย Phakakrong อ 14 ก.ค. 2020 6:03 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
186
อ 14 ก.ค. 2020 6:03 pm โดย Phakakrong
c# read excel .xlsx
โดย jataz2 อ 14 ก.ค. 2020 2:50 pm บอร์ด Programming - C/C++ & java & Python
0
167
อ 14 ก.ค. 2020 2:50 pm โดย jataz2
การเทสแป้นพิมพ์
โดย natthanit.r2538 อ 14 ก.ค. 2020 1:43 pm บอร์ด Share Knowledge
0
145
อ 14 ก.ค. 2020 1:43 pm โดย natthanit.r2538
c# example format digit
โดย jataz2 อ 14 ก.ค. 2020 10:29 am บอร์ด Programming - C/C++ & java & Python
0
209
อ 14 ก.ค. 2020 10:29 am โดย jataz2
c# example read csv file
โดย jataz2 อ 14 ก.ค. 2020 10:20 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
105
อ 14 ก.ค. 2020 10:20 am โดย jataz2
งานประจำวันที่ 14 กรกฏาคม 2563
โดย Phakakrong อ 14 ก.ค. 2020 9:36 am บอร์ด M105 - ผกากรอง กุสาวดี
2
26
อ 14 ก.ค. 2020 7:26 pm โดย Phakakrong
การเขียนโพสต์แชร์ในบอร์ดด้วยรูปแบบที่ถูกต้อง
โดย Phakakrong จ 13 ก.ค. 2020 5:33 pm บอร์ด Share Knowledge
0
157
จ 13 ก.ค. 2020 5:33 pm โดย Phakakrong
วิธีการทำ Logged Calls รับ / โทรออก
โดย Phakakrong จ 13 ก.ค. 2020 2:52 pm บอร์ด M105 - ผกากรอง กุสาวดี
0
22
จ 13 ก.ค. 2020 2:52 pm โดย Phakakrong
ขอความช่วยเหลือ ดู Code สไลด์ แบบมีลูกศรกดด้านข้างครับ
โดย dzjp จ 13 ก.ค. 2020 2:43 pm บอร์ด Programming - PHP
0
170
จ 13 ก.ค. 2020 2:43 pm โดย dzjp
ร่วมใจให้ชุมชนดีเด่นกับโครงการธนาคารเห็ด
โดย medalezga จ 13 ก.ค. 2020 12:12 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
179
พ 15 ก.ค. 2020 9:58 am โดย Sirayu
การนำเอาข้อมูลหลายๆ Sheet(Excel ) มารวมกันด้วย Power Query
โดย Phakakrong จ 13 ก.ค. 2020 11:37 am บอร์ด Microsoft Office Knowledge & line & Etc
0
253
จ 13 ก.ค. 2020 11:37 am โดย Phakakrong
งานประจำวันที่ 13 กรกฏาคม 2563
โดย Phakakrong จ 13 ก.ค. 2020 9:43 am บอร์ด M105 - ผกากรอง กุสาวดี
4
65
จ 13 ก.ค. 2020 7:03 pm โดย Phakakrong
ถ้าต้องการจะส่งเมล เเล้วแนบไฟล์ไปด้วยใน phpbb ทำยังไงคะ
โดย thatsawan ส 11 ก.ค. 2020 11:33 am บอร์ด Programming - PHP
7
311
อ 14 ก.ค. 2020 2:09 pm โดย thatsawan
การเพิ่มกรอบจอโทรศัพท์มือถือบน Google Chrome
โดย natthanit.r2538 ส 11 ก.ค. 2020 10:41 am บอร์ด Share Knowledge
0
202
ส 11 ก.ค. 2020 10:41 am โดย natthanit.r2538