data-checked

ภาพรวม

data-checked ผูกสถานะ checked ของ checkbox และ radio inputs กับข้อมูล เป็นทางเลือกที่ง่ายกว่า data-model สำหรับการใช้งานเฉพาะ checkbox/radio

ใช้เมื่อ:

• Binding สถานะ checkbox/radio อย่างง่าย
• สถานะ checked แบบ read-only จากข้อมูล
• เมื่อไม่ต้องการ full two-way binding

ทำไมต้องใช้:

• ✅ ใช้ง่ายและชัดเจนสำหรับ checkboxes/radios
• ✅ อัพเดทแบบ reactive
• ✅ ทำงานกับ expressions ได้

การใช้งานพื้นฐาน

Checkbox

<input type="checkbox" data-checked="isEnabled">

กับข้อมูล:

{ isEnabled: true }

ผลลัพธ์:

<input type="checkbox" checked>

Radio Button

<input type="radio" name="size" value="small" data-checked="size === 'small'">
<input type="radio" name="size" value="medium" data-checked="size === 'medium'">
<input type="radio" name="size" value="large" data-checked="size === 'large'">

Syntax

<input type="checkbox" data-checked="expression">
<input type="radio" data-checked="expression">

ฟีเจอร์

1. Boolean Property Binding

<input type="checkbox" data-checked="settings.notifications">

2. Expression Evaluation

<input type="checkbox" data-checked="items.length > 0">
<input type="checkbox" data-checked="selectedItems.includes('item1')">

3. Radio Group

<div class="radio-group">
  <label>
    <input type="radio" name="theme" value="light" data-checked="theme === 'light'">
    สว่าง
  </label>
  <label>
    <input type="radio" name="theme" value="dark" data-checked="theme === 'dark'">
    มืด
  </label>
  <label>
    <input type="radio" name="theme" value="system" data-checked="theme === 'system'">
    ตามระบบ
  </label>
</div>

4. กับ data-on สำหรับ Interactivity

<input type="checkbox"
       data-checked="isComplete"
       data-on="change:toggleComplete">

ตัวอย่างขั้นสูง

Feature Toggles

<div class="feature-toggles">
  <label>
    <input type="checkbox"
           data-checked="features.darkMode"
           data-on="change:toggleFeature('darkMode')">
    โหมดมืด
  </label>

  <label>
    <input type="checkbox"
           data-checked="features.notifications"
           data-on="change:toggleFeature('notifications')">
    การแจ้งเตือน
  </label>

  <label>
    <input type="checkbox"
           data-checked="features.autoSave"
           data-on="change:toggleFeature('autoSave')">
    บันทึกอัตโนมัติ
  </label>
</div>

การเลือกในรายการ

<ul data-for="item in items">
  <template>
    <li>
      <input type="checkbox"
             data-checked="selectedIds.includes(item.id)"
             data-on="change:toggleSelection(item.id)">
      <span data-text="item.name"></span>
    </li>
  </template>
</ul>

เลือกทั้งหมด / ไม่เลือก

<div class="selection-controls">
  <label>
    <input type="checkbox"
           data-checked="selectedItems.length === allItems.length"
           data-on="change:selectAll">
    เลือกทั้งหมด
  </label>

  <ul data-for="item in allItems">
    <template>
      <li>
        <input type="checkbox"
               data-checked="selectedItems.includes(item.id)"
               data-on="change:toggleItem(item.id)">
        <span data-text="item.name"></span>
      </li>
    </template>
  </ul>
</div>

API อ้างอิง

ทำงานกับ

ผลลัพธ์ Expression

ข้อควรระวัง

⚠️ 1. ใช้กับ Input Type ผิด

<!-- ❌ ไม่ทำงานกับ text inputs -->
<input type="text" data-checked="isActive">

<!-- ✅ ใช้กับ checkbox/radio เท่านั้น -->
<input type="checkbox" data-checked="isActive">

⚠️ 2. One-Way vs Two-Way

<!-- data-checked เป็น one-way (data → checkbox) -->
<input type="checkbox" data-checked="isEnabled">

<!-- สำหรับ two-way ใช้ data-model -->
<input type="checkbox" data-model="isEnabled">

<!-- หรือเพิ่ม event handler -->
<input type="checkbox"
       data-checked="isEnabled"
       data-on="change:updateEnabled">

⚠️ 3. Radio ไม่มี Name Attribute

<!-- ❌ Radios ไม่มี name สามารถเลือกได้ทั้งหมด -->
<input type="radio" data-checked="size === 'small'">
<input type="radio" data-checked="size === 'large'">

<!-- ✅ ใส่ name สำหรับ radio groups เสมอ -->
<input type="radio" name="size" data-checked="size === 'small'">
<input type="radio" name="size" data-checked="size === 'large'">

เปรียบเทียบ: data-checked vs data-model

<!-- ใช้ data-checked สำหรับแสดง -->
<input type="checkbox" data-checked="items.length > 0" disabled>

<!-- ใช้ data-model สำหรับแก้ไข -->
<input type="checkbox" data-model="form.acceptTerms">

Directives ที่เกี่ยวข้อง

• data-model - สำหรับ two-way binding
• data-on - สำหรับจัดการ change events
• data-attr - สำหรับ checkbox attributes อื่น