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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 20 กันยายน 2561
โดย tatiya พฤ 20 ก.ย. 2018 9:23 am บอร์ด M065 - ตติยะ นาชัย
0
3
พฤ 20 ก.ย. 2018 9:23 am โดย tatiya
checkbox พร้อมกรองจำนวน
โดย Ittichai_chupol พ 19 ก.ย. 2018 5:49 pm บอร์ด Programming - PHP
0
17
พ 19 ก.ย. 2018 5:49 pm โดย Ittichai_chupol
การทำแผ่นรองเมาส์สำหรับวัยทำงานแบบง่าย
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:53 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
พ 19 ก.ย. 2018 4:53 pm โดย Ittichai_chupol
การทำข้าวขย้ำกล้วย ให้เด็ก อายุ 3 - 6 เดือน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:51 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 19 ก.ย. 2018 4:51 pm โดย Ittichai_chupol
สถานที่ท่องเทียวน่าสนใจ อุทยานแห่งชาติน้ำตกพลิ้ว จังหวัดจันทบุรี
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
พ 19 ก.ย. 2018 4:48 pm โดย Ittichai_chupol
R - mod_jshopping_shipping_method โมดูลการจัดส่งสินค้า
โดย pprn พ 19 ก.ย. 2018 4:42 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
พ 19 ก.ย. 2018 4:42 pm โดย pprn
การจัดเตรียมแปลงเพาะผักไร้ดิน แบบแปลงน้ำไม่ไหลเวียน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 19 ก.ย. 2018 4:25 pm โดย Ittichai_chupol
การเพาะปลูกผักสลัดแบบไร้ดิน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
พ 19 ก.ย. 2018 4:19 pm โดย Ittichai_chupol
Q- ไม่สามารถพิมพ์ข้อความลงบน Google chrom ได้
โดย tatiya พ 19 ก.ย. 2018 12:36 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
32
พ 19 ก.ย. 2018 1:02 pm โดย tatiya
VDO - การทำงานของโปรแกรมเมอร์และการอัพเดทงานในเเต่ละวัน
โดย prakon พ 19 ก.ย. 2018 11:56 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
4
พ 19 ก.ย. 2018 11:56 am โดย prakon
การเดินทางจากเพชรบุรี มา กรุงเทพฯ
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:39 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
พ 19 ก.ย. 2018 11:39 am โดย Ittichai_chupol
งานประจำวันที่ 19 กันยายน 2561
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:03 am บอร์ด M070 - อิทธิชัย ชูผล
3
22
พ 19 ก.ย. 2018 7:08 pm โดย Ittichai_chupol
Work's on Hand อิทธิชัย ชูผล M070
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:01 am บอร์ด M070 - อิทธิชัย ชูผล
0
5
พ 19 ก.ย. 2018 11:01 am โดย Ittichai_chupol
งานประจำวันที่ 19 กันยายน 2561
โดย muneela พ 19 ก.ย. 2018 10:57 am บอร์ด M068 - มุนีลา หมัดบาซา
1
11
พ 19 ก.ย. 2018 7:08 pm โดย muneela
งานประจำวันที่ 19 กันยายน 2561
โดย pprn พ 19 ก.ย. 2018 10:21 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
13
พ 19 ก.ย. 2018 7:15 pm โดย pprn
งานประจำวันที่ 19 กันยายน 2561
โดย tai14 พ 19 ก.ย. 2018 10:00 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
3
พ 19 ก.ย. 2018 7:02 pm โดย tai14
งานประจำวันที่ 19 กันยายน 2561
โดย prakon พ 19 ก.ย. 2018 9:53 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
10
พ 19 ก.ย. 2018 10:01 am โดย prakon
งานประจำวันที่ 19 กันยายน 2561
โดย tatiya พ 19 ก.ย. 2018 9:26 am บอร์ด M065 - ตติยะ นาชัย
1
9
พ 19 ก.ย. 2018 8:29 pm โดย tatiya
B - ระบบแสดงยอดสต็อค On Hand ของ product set ไม่ถูกต้อง
โดย rinrada พ 19 ก.ย. 2018 8:36 am บอร์ด Hachanna - Testter
0
9
พ 19 ก.ย. 2018 8:36 am โดย rinrada
งานประจำวันที่ 18 กันยายน 2561
โดย muneela อ 18 ก.ย. 2018 10:22 am บอร์ด M068 - มุนีลา หมัดบาซา
1
8
อ 18 ก.ย. 2018 7:08 pm โดย muneela