บทความนี้จะอธิบายขั้นตอนการตรวจสอบและยกเลิกการเลือกช่องทำเครื่องหมายโดยใช้ JavaScript
จะทำเครื่องหมาย / ยกเลิกการเลือกช่องทำเครื่องหมายโดยใช้ JavaScript ได้อย่างไร
หากต้องการเลือกหรือยกเลิกการเลือกช่องทำเครื่องหมายใน JavaScript ให้ใช้ปุ่ม “ ตรวจสอบแล้ว ' คุณลักษณะ. ขั้นแรก รับข้อมูลอ้างอิงขององค์ประกอบ HTML “ ช่องทำเครื่องหมาย ” ด้วยความช่วยเหลือจากที่ได้รับมอบหมาย “ รหัส ' ใช้ ' getElementById() ” วิธีการ จากนั้นใช้ “ ตรวจสอบแล้ว ” คุณสมบัติตามมูลค่าของมัน
ตัวอย่างที่ 1: ทำเครื่องหมาย/ยกเลิกการเลือกช่องทำเครื่องหมายเดียว
ขั้นแรก สร้างไฟล์ HTML โดยมีโค้ดดังนี้
< h3 > คลิกปุ่มเพื่อเลือกหรือยกเลิกการเลือกช่องทำเครื่องหมาย h3 >
< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' รหัส = 'ช่องทำเครื่องหมาย' > เห็นด้วยกับข้อตกลงและเงื่อนไข < br >< br >
< ประเภทปุ่ม = 'ปุ่ม' เมื่อคลิก = 'ตรวจสอบ()' > ใช่ ปุ่ม >
< ประเภทปุ่ม = 'ปุ่ม' เมื่อคลิก = 'ยกเลิกการเลือก ()' > ไม่ ปุ่ม >
ในรหัสด้านบน:
- สร้างช่องทำเครื่องหมายด้วยรหัส ' ช่องทำเครื่องหมาย ” ที่จะใช้ในการเข้าถึงองค์ประกอบ “ ช่องทำเครื่องหมาย ” เพื่อดำเนินการ
- สร้างปุ่มสองปุ่ม “ ใช่ ' และ ' ไม่ ” เพื่อทำเครื่องหมายหรือยกเลิกการเลือกช่องทำเครื่องหมายที่จะเรียกใช้ฟังก์ชัน “ ตรวจสอบ() ' และ ' ยกเลิกการเลือก () ” ตามลำดับเหตุการณ์การคลิก
หลังจากรันโค้ดด้านบน ผลลัพธ์ที่ได้จะเป็นดังนี้:
ถัดไป กำหนดฟังก์ชันเพื่อดำเนินการในช่องทำเครื่องหมายในไฟล์ JavaScript หรือแท็ก หากต้องการทำเครื่องหมายที่ช่องทำเครื่องหมาย ให้ใช้บรรทัดโค้ดด้านล่าง:
การทำงาน ตรวจสอบ ( ) {
ให้ป้อนข้อมูล = เอกสาร. getElementById ( 'ช่องทำเครื่องหมาย' ) ;
ป้อนข้อมูล. ตรวจสอบแล้ว = จริง ;
}
ในรหัสด้านบน:
- กำหนดฟังก์ชัน “ ตรวจสอบ() ” ที่จะเรียกใช้ปุ่มคลิกเพื่อทำเครื่องหมายที่ช่องทำเครื่องหมาย
- ภายในเนื้อหาของฟังก์ชัน รับข้อมูลอ้างอิงของช่องทำเครื่องหมายโดยใช้ id ' ช่องทำเครื่องหมาย ” ด้วยความช่วยเหลือของ “ getElementById() ” วิธีและเก็บไว้ในตัวแปร “ ป้อนข้อมูล '.
- ทำเครื่องหมายที่ช่องทำเครื่องหมายโดยตั้งค่า “ ตรวจสอบแล้ว ' คุณสมบัติ ' จริง '.
หากต้องการยกเลิกการทำเครื่องหมายที่ช่องทำเครื่องหมายโดยคลิกที่ “ ไม่ ปุ่ม ” ใช้รหัสที่ระบุด้านล่าง:
การทำงาน ยกเลิกการเลือก ( ) {ให้ป้อนข้อมูล = เอกสาร. getElementById ( 'ช่องทำเครื่องหมาย' ) ;
ป้อนข้อมูล. ตรวจสอบแล้ว = เท็จ ;
}
ข้อมูลโค้ดด้านบน:
- กำหนดฟังก์ชัน “ ยกเลิกการเลือก () ” ซึ่งจะทำให้คลิกปุ่มเพื่อยกเลิกการเลือกช่องทำเครื่องหมาย
- ภายในเนื้อหาของฟังก์ชัน รับข้อมูลอ้างอิงของช่องทำเครื่องหมายโดยใช้ id ' ช่องทำเครื่องหมาย ” ด้วยความช่วยเหลือของ “ getElementById() ” วิธีการและเก็บไว้ในตัวแปร “ ป้อนข้อมูล '.
- ยกเลิกการเลือกช่องทำเครื่องหมายโดยตั้งค่า “ ตรวจสอบแล้ว ' คุณสมบัติ ' เท็จ '.
สุดท้าย กำหนดฟังก์ชันเพื่อยกเลิกการเลือกช่องทำเครื่องหมายตามค่าเริ่มต้นในการโหลดหน้าเว็บโดยใช้ ' window.onload ' เหตุการณ์:
หน้าต่าง. กำลังโหลด = การทำงาน ( ) {หน้าต่าง. addEventListener ( 'โหลด' , ตรวจสอบ , เท็จ ) ;
}
เอาต์พุต
เอาต์พุตแสดงว่าช่องทำเครื่องหมายถูกเลือกและยกเลิกการเลือกสำเร็จในขณะที่คลิกที่ปุ่ม
ตัวอย่างที่ 2: ทำเครื่องหมาย/ยกเลิกการเลือกช่องทำเครื่องหมายหลายช่อง
มาดูตัวอย่างวิธีการเลือกหรือยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดพร้อมกัน
ขั้นแรก สร้างไฟล์ HTML จากนั้นสร้างช่องทำเครื่องหมายหลายช่องและปุ่มที่มีรหัส ' สลับ ” ที่จะสลับช่องทำเครื่องหมายเพื่อเลือกหรือยกเลิกการเลือก:
< h3 > คลิกปุ่มเพื่อทำเครื่องหมายหรือยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมด h3 >< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' ระดับ = 'ช่องทำเครื่องหมาย' > ตรวจสอบหรือยกเลิกการเลือกฉัน < br >
< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' ระดับ = 'ช่องทำเครื่องหมาย' > ตรวจสอบหรือยกเลิกการเลือกฉัน < br >
< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' ระดับ = 'ช่องทำเครื่องหมาย' > ตรวจสอบหรือยกเลิกการเลือกฉัน < br >
< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' ระดับ = 'ช่องทำเครื่องหมาย' > ตรวจสอบหรือยกเลิกการเลือกฉัน < br >
< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' ระดับ = 'ช่องทำเครื่องหมาย' > ตรวจสอบหรือยกเลิกการเลือกฉัน < br >< br >
< ประเภทอินพุต = 'ปุ่ม' รหัส = 'สลับ' ค่า = 'คลิกเพื่อสลับช่องทำเครื่องหมาย' >
ผลลัพธ์ที่เกี่ยวข้องจะเป็น:
หลังจากนั้น ในไฟล์ JavaScript หรือแท็ก