บทความนี้อธิบายถึงวัตถุประสงค์ ฟังก์ชัน และการใช้คุณสมบัติ HTML DOM Input Radio 'ตรวจสอบ' ใน JavaScript
HTML DOM Input Radio คุณสมบัติ 'ถูกตรวจสอบ' ใน JavaScript คืออะไร
คุณสมบัติ 'ตรวจสอบแล้ว' ของวิทยุอินพุตทำงานบนฟอร์ม HTML และช่องป้อนข้อมูลเพื่อตั้งค่าและตรวจสอบสถานะของปุ่ม 'วิทยุ'
ไวยากรณ์ (ตั้งค่าคุณสมบัติการตรวจสอบ)
วัตถุวิทยุ ตรวจสอบแล้ว = จริง | เท็จตามไวยากรณ์การส่งคืนที่กำหนดไว้ คุณสมบัติ 'ตรวจสอบแล้ว' รองรับพารามิเตอร์สองตัวที่แสดงรายการด้านล่าง:
- จริง: แสดงว่ามีการตรวจสอบองค์ประกอบที่เกี่ยวข้อง
- เท็จ: แสดงว่าไม่ได้เลือกองค์ประกอบที่เกี่ยวข้อง
ไวยากรณ์ (ส่งคืนคุณสมบัติที่ตรวจสอบแล้ว)
วัตถุวิทยุ ตรวจสอบแล้วในไวยากรณ์ข้างต้น ' วัตถุวิทยุ ” หมายถึง HTML “ <อินพุต> ” องค์ประกอบที่มีประเภทคือ “วิทยุ”
ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นเพื่ออธิบายการใช้คุณสมบัติ HTML DOM Input Radio 'ตรวจสอบ' ด้วยความช่วยเหลือของตัวอย่างที่ใช้งานได้จริง
ตัวอย่างที่ 1: การใช้คุณสมบัติ 'ตรวจสอบ' ของวิทยุอินพุต การใช้ไวยากรณ์พื้นฐาน
ในตัวอย่างแรก ปุ่ม 'ตัวเลือก' ถูกสร้างขึ้นเพื่อตั้งค่าคุณสมบัติ 'ตรวจสอบแล้ว' โดยใช้ไวยากรณ์ทั่วไปที่กำหนดไว้
รหัส HTML
ประการแรก ดูรหัส HTML ที่ระบุไว้:
< ลักษณะร่างกาย = 'จัดข้อความ: กึ่งกลาง' >
< ชั่วโมง2 > HTML คุณสมบัติการตรวจสอบวิทยุอินพุต DOM ชั่วโมง2 >
สี : < ประเภทอินพุต = 'วิทยุ' รหัส = 'สีเหลือง' > สีเหลือง < br >< br >
< ปุ่มบนคลิก = 'การตรวจสอบสี ()' > ตรวจสอบ 'สีเหลือง' ปุ่ม >
< ปุ่มบนคลิก = 'สียกเลิกการเลือก ()' > ยกเลิกการเลือก 'สีเหลือง' ปุ่ม >
ในบรรทัดรหัสด้านบน:
- “ <เนื้อหา> ” แท็กกำหนดส่วนเนื้อหาที่จัดชิดกับ “ ศูนย์ '.
- “ แท็ก ” ระบุหัวข้อย่อยแรก
- “ <อินพุต> ” แท็กเพิ่มปุ่ม “วิทยุ” โดยระบุประเภทอินพุต “ วิทยุ ” ด้วยรหัสที่กำหนด “ สีเหลือง '.
- “ <ปุ่ม> ” แท็กเพิ่มปุ่มธรรมดาที่เกี่ยวข้องกับ “ เมื่อคลิก ” เหตุการณ์เพื่อดำเนินการ “ ตรวจสอบสี () ” ฟังก์ชันที่จะเข้าถึงได้เมื่อคลิกปุ่ม
- ในทำนองเดียวกันอีก “ <ปุ่ม> ” แท็กสร้างปุ่มเพื่อเรียกใช้ “ colorUncheck() ” ฟังก์ชั่นเมื่อคลิกปุ่ม
รหัสจาวาสคริปต์
ถัดไป ทำตามรหัส JavaScript ที่กำหนด:
< สคริปต์ >ฟังก์ชัน colorCheck ( ) {
เอกสาร. getElementById ( 'สีเหลือง' ) . ตรวจสอบแล้ว = จริง ;
}
ฟังก์ชั่น colorUncheck ( ) {
เอกสาร. getElementById ( 'สีเหลือง' ) . ตรวจสอบแล้ว = เท็จ ;
}
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- หน้าที่แรก “ ตรวจสอบสี () ” ใช้ “ document.getElementById() ” วิธีการเรียกปุ่มตัวเลือก เชื่อมโยง “ ตรวจสอบแล้ว ” คุณสมบัติและตั้งค่าเป็น “จริง”
- ในทางกลับกัน ฟังก์ชัน “ colorUncheck() ” ตั้งค่าของ “ ตรวจสอบแล้ว คุณสมบัติ ” เป็น “เท็จ” กับปุ่มตัวเลือกที่เข้าถึง
เอาต์พุต
ดังที่เห็น เอาต์พุตจะตรวจสอบปุ่ม 'วิทยุ' ที่ปุ่ม (ชื่อ 'ตรวจสอบ') คลิกและยกเลิกการเลือก' ที่ปุ่ม ('ยกเลิกการเลือก') คลิก
ตัวอย่างที่ 2: ส่งคืนค่า 'ตรวจสอบ' ของวิทยุอินพุต
ตัวอย่างนี้ใช้คุณสมบัติ 'ตรวจสอบ' ของอินพุตวิทยุเพื่อส่งคืนสถานะของปุ่ม 'วิทยุ' เป้าหมายเป็นค่าบูลีน
รหัส HTML
พิจารณารหัส HTML ต่อไปนี้:
< ลักษณะร่างกาย = 'จัดข้อความ: กึ่งกลาง' >< ชั่วโมง2 > HTML คุณสมบัติการตรวจสอบวิทยุอินพุต DOM ชั่วโมง2 >
สี : < ประเภทอินพุต = 'วิทยุ' ตรวจสอบแล้ว = จริง รหัส = 'สีเหลือง' > สีเหลือง < br >< br >
< ปุ่มบนคลิก = 'การตรวจสอบสี ()' > ตรวจสอบ 'สีเหลือง' ปุ่ม >
< รหัสพี = 'ตัวอย่าง' >< หน้า >
ในบล็อกโค้ดด้านบน ' วิทยุ ปุ่ม ” จะถูกสร้างขึ้นและสถานะของ “ ตรวจสอบแล้ว ” คุณสมบัติถูกตั้งค่าเป็น “ จริง '. หลังจากนั้น ในทำนองเดียวกัน ฟังก์ชันที่ระบุจะถูกเรียกใช้ผ่านไฟล์แนบ “ เมื่อคลิก ” เหตุการณ์ด้วยปุ่ม
รหัสจาวาสคริปต์
ตอนนี้ พิจารณาบรรทัดของรหัสต่อไปนี้:
< สคริปต์ >ฟังก์ชัน colorCheck ( ) {
ที่ไหน = เอกสาร. getElementById ( 'สีเหลือง' ) . เช็คดีฟอลต์แล้ว ;
เอกสาร. getElementById ( 'ตัวอย่าง' ) . HTML ภายใน = ที ;
}
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- กำหนดฟังก์ชันชื่อ “ ตรวจสอบสี () '.
- ในคำจำกัดความ ให้ใช้ “ document.getElementById() ” วิธีการเข้าถึงปุ่ม “วิทยุ” โดยใช้รหัส “สีเหลือง” และเชื่อมโยง “ เช็คดีฟอลต์แล้ว คุณสมบัติ ” เพื่อตรวจสอบค่าเริ่มต้นของ “ ตรวจสอบแล้ว ' คุณลักษณะ.
- สุดท้าย ใช้ “ document.getElementById() วิธีการ ” อีกครั้งเพื่อดึงย่อหน้าว่างที่รวมไว้และแสดงสถานะของคุณสมบัติ “ตรวจสอบแล้ว”
.
เอาต์พุต
ตามที่วิเคราะห์ ผลลัพธ์จะส่งคืนสถานะของปุ่ม 'วิทยุ' ที่ระบุ เช่น ' จริง ” เมื่อคลิกปุ่ม
บทสรุป
ใน JavaScript คุณสมบัติ HTML DOM Input Radio “checked” มีประโยชน์ในการตั้งค่าและส่งกลับสถานะการตรวจสอบของปุ่ม “Radio” ไวยากรณ์ชุดของคุณสมบัติ 'ตรวจสอบ' ใช้ได้กับสองค่า ' จริง ' และ ' เท็จ '. ในทางกลับกัน ไวยากรณ์การส่งคืนไม่จำเป็นต้องใช้พารามิเตอร์ใดๆ บทความนี้แสดงวัตถุประสงค์ ฟังก์ชัน และการใช้งานคุณสมบัติ HTML DOM Input Radio 'ตรวจสอบ' ใน JavaScript