체크 상자에 bind:checked 사용하기
불리언 변수를 체크 상자 입력의 선택 상태에 연결합니다.
체크 상자에 bind:checked 사용하기은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 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를 사용합니다.
자주 묻는 질문
“체크 상자에 bind:checked 사용하기” 강의는 무료인가요?
네 — “체크 상자에 bind:checked 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“체크 상자에 bind:checked 사용하기”에서 뭘 배우나요?
불리언 변수를 체크 상자 입력의 선택 상태에 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“체크 상자에 bind:checked 사용하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 텍스트 입력에 bind:value 사용하기
- 체크 상자에 bind:checked 사용하기
- 라디오 및 체크 상자 그룹에 bind:group 사용하기
- DOM 요소 참조에 bind:this 사용하기