บทความนี้จะสาธิตวิธีการตรวจสอบและยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดโดยใช้ JavaScript
จะตรวจสอบและยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดโดยใช้ JavaScript ได้อย่างไร
หากต้องการทำเครื่องหมายและยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดใน JavaScript คุณสามารถใช้:
- “ document.getElementsByName ” วิธีการที่มีช่องทำเครื่องหมาย
- “ document.getElementsByName ” วิธีด้วยปุ่ม
วิธีการดังกล่าวจะถูกกล่าวถึงทีละคน!
วิธีที่ 1: เลือกและยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดใน JavaScript โดยใช้วิธี 'document.getElementsByName()' ด้วย 'ช่องทำเครื่องหมาย'
“ document.getElementsByName() ” วิธีการส่งคืนองค์ประกอบที่มีชื่อที่ระบุในอาร์กิวเมนต์ วิธีนี้จะใช้เพื่อดึงค่าของช่องทำเครื่องหมายแต่ละช่องโดยใช้ชื่อที่ส่งผ่าน
มาดูตัวอย่างต่อไปนี้เพื่อสาธิต
ตัวอย่าง
ขั้นแรกให้ระบุประเภทอินพุตเป็น “ ช่องทำเครื่องหมาย ” และชื่อและค่าเฉพาะจะถูกกำหนดให้กับแต่ละช่องทำเครื่องหมาย:
< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' ชื่อ = 'แค่' ค่า = 'งูหลาม' > Python < br />< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' ชื่อ = 'แค่' ค่า = 'จาวา' > Java < br />
< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' ชื่อ = 'แค่' ค่า = 'จาวาสคริปต์' > JavaScript < br />
ตอนนี้รวมช่องทำเครื่องหมายเพิ่มเติมด้วยค่า ' ตรวจสอบทั้งหมด ” และแนบ “ เมื่อคลิก() ” ด้วยช่องทำเครื่องหมายนี้ซึ่งจะทำงานในลักษณะดังกล่าวเมื่อช่องทำเครื่องหมายจะถูกคลิก “ ตรวจสอบUnchecked ()” เมธอดจะถูกเรียกใช้ด้วยอ็อบเจ็กต์ “ นี้ ” เป็นข้อโต้แย้ง:
< ประเภทอินพุต = 'ช่องทำเครื่องหมาย' เมื่อคลิก = 'checkUncheck (นี่)' /> ตรวจสอบทั้งหมด < br />
หลังจากนั้นให้กำหนดฟังก์ชั่นชื่อ “ เช็คUncheck() ” ในไฟล์ JavaScript โดยมีตัวแปรชื่อ “ ช่องทำเครื่องหมาย ” เป็นข้อโต้แย้ง ตอนนี้เข้าถึงค่าช่องทำเครื่องหมายโดยใช้ ' document.getElementsByName() ” และวิธีการวางค่าของ “ ชื่อ ” เป็นอาร์กิวเมนต์
สุดท้าย ใช้ “ สำหรับ ” วนซ้ำตามค่าช่องทำเครื่องหมายทั้งหมดและใช้ “ ตรวจสอบแล้ว ” คุณสมบัติเพื่อทำเครื่องหมายว่าทำเครื่องหมายทั้งหมด:
ตรวจสอบฟังก์ชันUncheck ( ช่องทำเครื่องหมาย ) {รับ = เอกสาร. getElementsByName ( 'แค่' ) ;
สำหรับ ( อยู่ใน = 0 ; ผม < รับ. ความยาว ; ผม ++ ) {
รับ [ ผม ] . ตรวจสอบแล้ว = ช่องทำเครื่องหมาย ตรวจสอบแล้ว ; }
}
อย่างที่คุณเห็นเมื่อ “ ตรวจสอบทั้งหมด ช่องทำเครื่องหมาย ” ถูกทำเครื่องหมาย ส่วนช่องทำเครื่องหมายอื่นๆ ทั้งหมดจะถูกทำเครื่องหมายว่าถูกทำเครื่องหมายด้วย:
วิธีที่ 2: เลือกและยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดใน JavaScript โดยใช้วิธี 'document.getElementsByName()' ด้วย 'ปุ่ม'
“ document.getElementsByName() วิธี ” ตามที่กล่าวไว้ในวิธีการก่อนหน้านี้ ดึงองค์ประกอบที่มีชื่อที่ระบุในอาร์กิวเมนต์ สามารถใช้เพื่อทำเครื่องหมายหรือยกเลิกการเลือกช่องทำเครื่องหมายที่เพิ่มทั้งหมดบนหน้าเว็บ
ดูตัวอย่างต่อไปนี้สำหรับการสาธิต
ตัวอย่าง
ตอนนี้เราจะรวมสองปุ่มสำหรับทั้ง “ ตรวจสอบทั้งหมด ' และ ' ยกเลิกการเลือกทั้งหมด ” ฟังก์ชัน จากนั้นแนบ “ เมื่อคลิก ” ด้วยปุ่มทั้งสองซึ่งจะเข้าถึงฟังก์ชั่นที่ระบุแยกกัน:
< ประเภทอินพุต = 'ปุ่ม' เมื่อคลิก = 'ตรวจสอบ()' ค่า = 'ตรวจสอบทั้งหมด' />< ประเภทอินพุต = 'ปุ่ม' เมื่อคลิก = 'ยกเลิกการเลือก ()' ค่า = 'ยกเลิกการเลือกทั้งหมด' />
ถัดไป กำหนดฟังก์ชันชื่อ “ ตรวจสอบ() ” และใช้ “ document.getElementsByName ” ด้วยค่าที่กำหนดของ “ ชื่อ ' คุณลักษณะ. จากนั้น ทำซ้ำ “ สำหรับ ” วนซ้ำตามค่าช่องทำเครื่องหมายทั้งหมดที่กล่าวถึงในวิธีก่อนหน้า
นอกจากนี้ เมื่อคลิกปุ่มที่เกี่ยวข้อง ตรวจสอบแล้ว ” คุณสมบัติจะทำเครื่องหมายที่ช่องทำเครื่องหมายทั้งหมดและตั้งค่าสถานะที่เลือกเป็น “ จริง ”:
ตรวจสอบการทำงาน ( ) {เป็นแพะ = เอกสาร. getElementsByName ( 'ตรวจสอบ' ) ;
สำหรับ ( อยู่ใน = 0 ; ผม < รับ. ความยาว ; ผม ++ ) {
รับ [ ผม ] . ตรวจสอบแล้ว = จริง ; }
}
ถัดไป กำหนดฟังก์ชันชื่อ “ ยกเลิกการเลือก () ” และเพิ่มฟังก์ชันย้อนกลับเพื่อทำเครื่องหมายคุณสมบัติช่องทำเครื่องหมายเป็น “ เท็จ ”:
ฟังก์ชัน unCheck ( ) {เป็นแพะ = เอกสาร. getElementsByName ( 'ตรวจสอบ' ) ;
สำหรับ ( อยู่ใน = 0 ; ผม < รับ. ความยาว ; ผม ++ ) {
รับ [ ผม ] . ตรวจสอบแล้ว = เท็จ ; }
}
จะเห็นได้ในผลลัพธ์ว่าปุ่มที่เพิ่มนั้นทำงานได้อย่างสมบูรณ์:
เราได้จัดเตรียมวิธีการที่ง่ายที่สุดในการตรวจสอบและยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดโดยใช้ JavaScript
บทสรุป
สำหรับการตรวจสอบและยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดโดยใช้ JavaScript ให้ใช้ ' document.getElementsByName() ” วิธีการด้วย “ ช่องทำเครื่องหมาย ” เพื่อเพิ่มช่องทำเครื่องหมายและเข้าถึงฟังก์ชั่นซึ่งจะส่งผลให้ช่องทำเครื่องหมายหรือใช้วิธีเดียวกันกับ “ ปุ่ม ” เพื่อรวมปุ่มสองปุ่มแยกกันสำหรับการตรวจสอบและยกเลิกการเลือกค่าที่ระบุทั้งหมด บทความนี้อธิบายวิธีการตรวจสอบและยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดโดยใช้ JavaScript