bind:checked สำหรับช่องทำเครื่องหมาย
ผูกตัวแปรบูลีนกับสถานะ checked ของช่องป้อนข้อมูลแบบทำเครื่องหมาย
bind:checked สำหรับช่องทำเครื่องหมาย เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
การผูกช่องทำเครื่องหมาย
ใช้ bind:checked เพื่อซิงก์ค่าบูลีนกับอินพุตช่องทำเครื่องหมาย
<input type="checkbox" bind:checked={agreed} />การอ่านสถานะ
ตัวแปรที่ผูกไว้จะเป็น true เมื่อเลือก และเป็น false เมื่อไม่ได้เลือก
การสลับการมองเห็น
ใช้ร่วมกับ {#if} เพื่อแสดงหรือซ่อนเนื้อหาตามสถานะของช่องทำเครื่องหมาย
{#if agreed}<p>Thanks!</p>{/if}การตั้งค่าด้วยโปรแกรม
การกำหนดค่าให้ตัวแปรจะสลับการแสดงผลของช่องทำเครื่องหมาย
function reset() { agreed = false; }ช่องทำเครื่องหมายหลายช่อง
สำหรับช่องทำเครื่องหมายที่เป็นอิสระต่อกัน ให้ประกาศตัวแปรหนึ่งตัวต่อหนึ่งช่อง
let sub = false, terms = false;อินพุตสามสถานะ
DOM ยังมีพร็อพเพอร์ตี indeterminate ด้วย คุณสามารถผูกพร็อพเพอร์ตีนี้ด้วย bind:indeterminate
<input type="checkbox" bind:indeterminate={partial} />การเชื่อมกับแบบฟอร์ม
สถานะของช่องทำเครื่องหมายมีส่วนร่วมในการส่งแบบฟอร์มเช่นเดียวกับอินพุตอื่น
การครอบป้ายกำกับ
ครอบช่องทำเครื่องหมายไว้ภายใน <label> เพื่อให้การคลิกป้ายกำกับสลับสถานะของช่องได้
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>การเข้าถึงได้
ควรใส่ป้ายกำกับให้ช่องทำเครื่องหมายเสมอ โปรแกรมอ่านหน้าจอต้องอาศัยป้ายกำกับที่มองเห็นได้เพื่อให้เข้าใจบริบท
สถานะปิดใช้งาน
ใช้ร่วมกับ disabled={...} สำหรับช่องทำเครื่องหมายแบบอ่านอย่างเดียว
ผลข้างเคียงแบบตอบสนอง
ตอบสนองต่อการเปลี่ยนแปลงด้วยคำสั่ง $: ซึ่งจะทำงานเมื่อตัวแปรที่ผูกไว้ได้รับการอัปเดต
$: if (dark) document.body.classList.add("dark");ตรวจสอบความเข้าใจ
bind:checked ผูกกับอะไร
สรุป
bind:checked เชื่อมค่าบูลีนกับช่องทำเครื่องหมาย ใช้ bind:indeterminate สำหรับสถานะการแสดงผลที่สาม
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “bind:checked สำหรับช่องทำเครื่องหมาย” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “bind:checked สำหรับช่องทำเครื่องหมาย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “bind:checked สำหรับช่องทำเครื่องหมาย”
ผูกตัวแปรบูลีนกับสถานะ checked ของช่องป้อนข้อมูลแบบทำเครื่องหมาย คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “bind:checked สำหรับช่องทำเครื่องหมาย” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- bind:value สำหรับช่องป้อนข้อความ
- bind:checked สำหรับช่องทำเครื่องหมาย
- bind:group สำหรับกลุ่มปุ่มตัวเลือกและช่องทำเครื่องหมาย
- bind:this สำหรับการอ้างอิงองค์ประกอบ DOM