วิธีเลือกปุ่มตัวเลือกตามค่าเริ่มต้น

วิธีเลือกปุ่มตัวเลือกตามค่าเริ่มต้น

โดยค่าเริ่มต้น ' ตรวจสอบแล้ว แอตทริบิวต์ ” ใช้สำหรับเลือกปุ่มตัวเลือก หากใช้แอตทริบิวต์นี้กับปุ่มตัวเลือกหลายปุ่ม ระบบจะเลือกปุ่มตัวเลือกล่าสุดตามค่าเริ่มต้น ทำตามบล็อกทีละขั้นตอนเพื่อเลือกปุ่มตัวเลือกตามค่าเริ่มต้น:

ขั้นตอนที่ 1: สร้างปุ่มตัวเลือก

ในไฟล์ HTML ให้สร้างปุ่มตัวเลือกสามปุ่มและติดป้ายกำกับ:

ในข้อมูลโค้ดด้านบน:

• ปุ่มตัวเลือกถูกสร้างขึ้นโดยการสร้าง “ <อินพุต> ” แท็กและตั้งค่าประเภทเป็น “ วิทยุ '.
• กำหนดปุ่มตัวเลือกแต่ละปุ่มด้วย 'ชื่อ', 'รหัส' และ 'ค่า'
• ในตอนท้ายให้ใช้ ' รหัส ” ของช่องใส่ข้อมูลเพื่อแนบ “ <ฉลาก> ” แท็กโดยใช้ “ สำหรับ ' คุณลักษณะ.

หลังจากรันสคริปต์แล้วผลลัพธ์จะเป็นดังนี้:

รูปนี้แสดงว่าปุ่มตัวเลือกปรากฏขึ้น แต่ไม่มีปุ่มใดถูกเลือกตามค่าเริ่มต้น

ขั้นตอนที่ 2: เลือกตามค่าเริ่มต้น

“ ตรวจสอบแล้ว แอตทริบิวต์ ” ใช้เพื่อเลือกปุ่มตัวเลือกโดยอัตโนมัติ มันเลือกเพียงตัวเลือกเดียว นั่นเป็นเหตุผลว่าทำไมการเลือกปุ่มตัวเลือกหนึ่งปุ่มตามค่าเริ่มต้นจึงเป็นวิธีที่ดีกว่า มันจำกัดผู้ใช้ในการเลือกตัวเลือกที่เหมาะสม:

ในโค้ดข้างต้น ตรวจสอบแล้ว ใช้แอตทริบิวต์และกำหนดให้กับฟิลด์อินพุตแรกเท่านั้น

หลังจากดำเนินการหน้าเว็บโค้ดด้านบนจะเป็นดังนี้:

ผลลัพธ์แสดงให้เห็นว่าปุ่มตัวเลือกแรกถูกเลือกตามค่าเริ่มต้นในทุกการรีเฟรชของเพจ

เคล็ดลับโบนัส: การใช้ JavaScript เพื่อเลือกปุ่มตัวเลือกตามค่าเริ่มต้น

หากต้องการเลือกปุ่มตัวเลือกตามค่าเริ่มต้นโดยใช้ JavaScript ให้เข้าถึงปุ่มตัวเลือกโดยใช้ id จากนั้นเลือกแอตทริบิวต์ที่ตรวจสอบแล้วตั้งค่าบูลีนเป็น 'จริง' ตามโค้ดด้านล่าง:

ในรหัสนี้ ' ผู้เริ่มต้น ” คือรหัสของปุ่มตัวเลือกซึ่งถูกเลือกโดยค่าเริ่มต้น

หลังจากคอมไพล์สคริปต์แล้วผลลัพธ์จะเป็นดังนี้:

ในสแนปชอตด้านบน ปุ่มตัวเลือกแรกจะถูกเลือกตามค่าเริ่มต้นโดยใช้ JavaScript

บทสรุป

สำหรับการเลือกปุ่มตัวเลือก ผู้ใช้สามารถใช้ปุ่ม “ ตรวจสอบแล้ว ' คุณลักษณะ. หากใช้แอตทริบิวต์ที่ตรวจสอบแล้วในปุ่มตัวเลือกมากกว่าหนึ่งปุ่ม ปุ่มตัวเลือกจะได้รับค่าแอตทริบิวต์ 'ตรวจสอบแล้ว' ล่าสุด หากต้องการเลือกปุ่มตัวเลือกตามค่าเริ่มต้นโดยใช้ JavaScript ให้เข้าถึงปุ่มตัวเลือกโดยใช้ id บล็อกนี้ได้สาธิตวิธีเลือกปุ่มตัวเลือกตามค่าเริ่มต้นเรียบร้อยแล้ว