Get user defined data attribute จาก HTML tag

<div class="form-check fs-5 ms-0 me-2">
	<input class="form-check-input form-check-input-green" type="checkbox" value="" id="greenCheckbox_1" data-group="x" data-index="1">
	<label class="form-check-label" for="greenCheckbox_1">1</label>
</div>

คุณสามารถเรียกใช้ค่าใน data-index ของ checkbox นั้นได้ง่ายๆ ด้วยการใช้ property dataset ของ element ครับ

## วิธีการเข้าถึงค่า data-index

1. ค้นหา Element ที่ต้องการ

ก่อนอื่น คุณต้องค้นหา element ของ checkbox นั้นๆ ในหน้าเว็บเสียก่อน โดยอาจจะใช้ id, class, หรือ selector อื่นๆ

// ตัวอย่าง: ค้นหา checkbox ตัวแรกที่มี class ที่ต้องการ
const myCheckbox = document.querySelector('.form-check-input-green');

2. เรียกใช้ค่าผ่าน .dataset (วิธีที่แนะนำ)

สำหรับ data-* attribute ทุกตัว คุณสามารถเข้าถึงได้ผ่าน element.dataset ตามด้วยชื่อของ attribute ในรูปแบบ camelCase (ถ้าชื่อมีขีด - จะถูกแปลงเป็นตัวพิมพ์ใหญ่แทน)

• data-index จะกลายเป็น element.dataset.index
• data-group จะกลายเป็น element.dataset.group

// หลังจากได้ element มาแล้ว
const indexValue = myCheckbox.dataset.index;
const groupValue = myCheckbox.dataset.group;

console.log("Data Index:", indexValue); // แสดงค่าของ data-index
console.log("Data Group:", groupValue); // แสดงค่าของ data-group

## อีกหนึ่งวิธี: ใช้ getAttribute()

เป็นวิธีมาตรฐานที่ใช้ได้กับทุก attribute ไม่ใช่แค่ data-*

const indexValue = myCheckbox.getAttribute('data-index');
const groupValue = myCheckbox.getAttribute('data-group');

console.log("Data Index:", indexValue);
console.log("Data Group:", groupValue);