라디오 및 체크 상자 그룹에 bind:group 사용하기
서로 관련된 입력 그룹을 하나의 변수와 동기화합니다.
라디오 및 체크 상자 그룹에 bind:group 사용하기은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
라디오 그룹
서로 배타적인 옵션에는 같은 bind:group 변수를 사용하는 라디오 입력을 여러 개 사용합니다.
<input type="radio" bind:group={size} value="sm" /> S
<input type="radio" bind:group={size} value="md" /> M
<input type="radio" bind:group={size} value="lg" /> L작동 방식
바인딩된 변수는 선택한 라디오 입력의 값과 같습니다.
초기값
변수를 기본으로 선택된 옵션의 값으로 초기화합니다.
let size = "md";체크박스 그룹
여러 항목을 선택하려면 체크박스 그룹을 배열에 바인딩합니다.
<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> Docs배열 동작
바인딩된 배열에는 현재 체크된 모든 상자의 값이 들어 있습니다. 값의 추가와 제거는 자동으로 처리됩니다.
배열 초기화
빈 배열이나 미리 선택된 값이 들어 있는 배열로 시작합니다.
let tags = ["bug"];다른 입력 요소와 함께 사용하기
혼합형 UI에서는 같은 폼에서 value와 group을 바인딩할 수 있습니다.
옵션 반복하기
{#each}를 사용하여 데이터에서 옵션을 렌더링합니다.
{#each sizes as size}
<label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}비활성화된 옵션
그룹 바인딩을 깨뜨리지 않고 개별 옵션을 비활성화할 수 있습니다.
폼 제출
폼을 제출하면 값에는 바인딩된 변수가 반영됩니다.
유효성 검사
반응형 검사와 함께 사용하여 하나 이상의 항목을 선택하도록 요구합니다.
$: hasSelection = tags.length > 0;빠른 확인
체크박스 그룹에서 바인딩된 변수의 타입은 무엇인가요?
복습
라디오에는 공유 변수(문자열)와 체크박스에는 값의 배열을 사용하여 bind:group을 바인딩합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 41
- 레슨
- 163
자주 묻는 질문
“라디오 및 체크 상자 그룹에 bind:group 사용하기” 강의는 무료인가요?
네 — “라디오 및 체크 상자 그룹에 bind:group 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“라디오 및 체크 상자 그룹에 bind:group 사용하기”에서 뭘 배우나요?
서로 관련된 입력 그룹을 하나의 변수와 동기화합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“라디오 및 체크 상자 그룹에 bind:group 사용하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 텍스트 입력에 bind:value 사용하기
- 체크 상자에 bind:checked 사용하기
- 라디오 및 체크 상자 그룹에 bind:group 사용하기
- DOM 요소 참조에 bind:this 사용하기