Checkbox

체크박스는 선택 상태를 표시하는 표준 HTML 입력 요소를 Fomantic UI 스타일로 서식화한 컴포넌트예요. 라디오, 슬라이더, 토글, 인비저블 등 다양한 변형을 지원해요.

출처: 문서

본문

Types

Checkbox

표준 체크박스예요.

Make my profile visible

Radio

체크박스는 라디오 요소로 서식화할 수 있어요. 즉 배타적(exclusive) 옵션이에요.

Radio choice

How often do you use checkboxes?
          
            
              
              Once a week
            
          
          
            
              
              2-3 times a week
            
          
          
            
              
              Once a day
            
          
          
            
              
              Twice a day

How often do you use checkboxes?
          
            
              
              Once a week
            
          
          
            
              
              2-3 times a week
            
          
          
            
              
              Once a day
            
          
          
            
              
              Twice a day

Slider

체크박스는 현재 선택 상태를 강조하도록 서식화할 수 있어요.

Accept terms and conditions

Outbound Throughput
          
            
              
              20 mbps max
            
          
          
            
              
              10mbps max
            
          
          
            
              
              5mbps max
            
          
          
            
              
              Unmetered

Toggle

체크박스는 켜짐/꺼짐 선택을 보여주도록 서식화할 수 있어요.

Subscribe to weekly newsletter

Invisible

인비저블 체크박스는 텍스트나 이미지 전용 체크/라디오 박스를 사용할 수 있게 해줘요. 체크박스의 label 태그를 위해 button, message, segment 같은 다른 컴포넌트를 사용해서 스타일링해요.

Option OneI am a radio checkbox styled as button when clicked
          
          
            Option TwoI am a radio checkbox styled as message component when clicked
          
          
            
            Option ThreeI am a radio checkbox styled as segment when clicked

아이콘, 이모지, 플래그는 label 태그에 image 클래스만 있으면 돼요. 고전적인 ui image도 잘 동작해요.

States

Read-only

체크박스는 읽기 전용으로 만들어 상태를 변경할 수 없게 할 수 있어요.

Read Only

Checked

체크박스는 체크된 상태일 수 있어요.

Active

Indeterminate

체크박스는 중간(indeterminate) 상태일 수 있어요.

Indeterminate
      
      
      
      
        
        Indeterminate

Disabled

체크박스는 현재 상호작용할 수 없음을 보여줄 수 있어요.

Disabled
      
      
      
      
        
        Disabled

Variations

Fitted

fitted 체크박스는 라벨을 위한 패딩을 남기지 않아요.

Inverted

inverted 체크박스예요.

Right aligned

체크박스는 라벨의 오른쪽으로 정렬할 수 있어요.

Size

체크박스는 다양한 크기를 가질 수 있어요.

Checkbox
      
      
        
        Radio
      
      
        
        Toggle
      
      
        
        Slider

Checkbox
      
      
        
        Radio
      
      
        
        Toggle
      
      
        
        Slider

Checkbox
      
      
        
        Radio
      
      
        
        Toggle
      
      
        
        Slider

Checkbox
      
      
        
        Radio
      
      
        
        Toggle
      
      
        
        Slider

Checkbox
      
      
        
        Radio
      
      
        
        Toggle
      
      
        
        Slider

Checkbox
      
      
        
        Radio
      
      
        
        Toggle
      
      
        
        Slider

Checkbox
      
      
        
        Radio
      
      
        
        Toggle
      
      
        
        Slider

Examples

Using Callbacks

체크박스에는 각 상태 변경 행동의 두 가지 버전이 있어요. 호출이 체크박스 콜백을 트리거할지 여부를 결정할 수 있게 해주죠.

Example
            
            
              
              Checkbox
            
            
            
              
              Radio
            
          
        
        
          
            
              Console
            
            
              Toggle
              Check
              Uncheck
              Indeterminate
              Determinate
              Enable
              Disable
            
            
            
              Set Checked
              Set Unchecked
              Set Indeterminate
              Set Determinate
              Set Enabled
              Set Disabled
            
          
        
      
      
        var
          $console = $('.callback .console')
        ;
        $('.callback.example .checkbox')
          .checkbox()
          .first().checkbox({
            onChecked: function() {
              $console.append('onChecked called');
            },
            onUnchecked: function() {
              $console.append('onUnchecked called');
            },
            onEnable: function() {
              $console.append('onEnable called');
            },
            onDisable: function() {
              $console.append('onDisable called');
            },
            onDeterminate: function() {
              $console.append('onDeterminate called');
            },
            onIndeterminate: function() {
              $console.append('onIndeterminate called');
            },
            onChange: function() {
              $console.append('onChange called');
            }
          })
        ;
        // bind events to buttons
        $('.callback.example .button')
          .on('click', function() {
            $('.callback .checkbox').checkbox( $(this).data('method') );
          })
        ;

Grouped Checkboxes

중간(indeterminate) 상태는 체크도 언체크도 아닌 값을 나타내는 데 사용할 수 있어요.

Fruits
          
          
            
              
                
                Apple
              
            
            
              
                
                Orange
              
            
            
              
                
                Pear
              
            
          
        
        
          
            
            Vegetables
          
          
            
              
                
                Lettuce
              
            
            
              
                
                Carrot
              
            
            
              
                
                Spinach
              
            
          
        
      
      
        $('.list .master.checkbox')
          .checkbox({
            // check all children
            onChecked: function() {
              var
                $childCheckbox  = $(this).closest('.checkbox').siblings('.list').find('.checkbox')
              ;
              $childCheckbox.checkbox('check');
            },
            // uncheck all children
            onUnchecked: function() {
              var
                $childCheckbox  = $(this).closest('.checkbox').siblings('.list').find('.checkbox')
              ;
              $childCheckbox.checkbox('uncheck');
            }
          })
        ;
      
      
        $('.list .child.checkbox')
          .checkbox({
            // Fire on load to set parent value
            fireOnInit : true,
            // Change parent state on each child checkbox change
            onChange   : function() {
              var
                $listGroup      = $(this).closest('.list'),
                $parentCheckbox = $listGroup.closest('.item').children('.checkbox'),
                $checkbox       = $listGroup.find('.checkbox'),
                allChecked      = true,
                allUnchecked    = true
              ;
              // check to see if all other siblings are checked or unchecked
              $checkbox.each(function() {
                if( $(this).checkbox('is checked') ) {
                  allUnchecked = false;
                }
                else {
                  allChecked = false;
                }
              });
              // set parent checkbox state, but don't trigger its onChange callback
              if(allChecked) {
                $parentCheckbox.checkbox('set checked');
              }
              else if(allUnchecked) {
                $parentCheckbox.checkbox('set unchecked');
              }
              else {
                $parentCheckbox.checkbox('set indeterminate');
              }
            }
          })
        ;

Checking Conditions

체크박스에는 beforeChecked, beforeUnchecked, beforeDeterminate, beforeIndeterminate 네 가지 새 콜백이 포함돼요. 이 콜백에서 false를 반환하면 입력 값이 업데이트되기 전에 동작이 취소돼요.

Maybe this will work
      
      
        $('.cancel.example .ui.checkbox')
          .checkbox({
            beforeChecked: function() {
              var
                luckyPerson = (Math.random()

One-Way Choices

사용자가 박스를 체크할 수 있지만 언체크할 수 없게 하려면 uncheckable 설정을 사용해요.

$('.state.example .checkbox')
          .last()
          .checkbox({
            uncheckable: false
          })
        ;
      
      
        
          
            
            Disabled
          
        
        
          
            
            Read-only
          
        
        
          
            
            Uncheckable

Attaching Events to other Elements

체크박스는 attach events 행동을 사용해 다른 활성화 요소에 이벤트를 쉽게 연결할 수 있어요. 기본값은 토글링이지만 다른 행동도 사용할 수 있어요.

$('.test.checkbox').checkbox('attach events', '.toggle.button');
        $('.test.checkbox').checkbox('attach events', '.check.button', 'check');
        $('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');
      
      Toggle
      Check
      Uncheck
      
        
          
            
            1
          
        
        
          
            
            2
          
        
        
          
            
            3
          
        
        
          
            
            4
          
        
        
          
            
            5
          
        
        
          
            
            6

Initializing

Checkbox

체크박스는 동작하기 위해 Javascript를 요구하지 않아요.

Full Featured Checkboxes

체크박스에 Javascript를 사용하면 라벨이 자동으로 입력 값 변경을 트리거하고 콜백 함수를 제공해요. 또한 indeterminate 같은 일부 상태는 Javascript로만 트리거할 수 있어요.

Linked Labels

라벨을 Javascript 체크박스의 다른 기능 없이 연결만 하면 된다면, 라벨의 for 속성을 입력의 id와 일치시키면 돼요.

Behavior

행동들은 Javascript에서 다음 구문을 사용해 접근할 수 있어요:

.ui.checkbox').checkbox(behavior, argumentOne, argumentTwo...);

toggle — 체크박스를 현재 상태에서 전환해요.
check — 체크박스 상태를 체크로 설정해요.
uncheck — 체크박스 상태를 언체크로 설정해요.
indeterminate — 중간 상태 체크박스로 설정해요.
determinate — 결정(determinate) 상태 체크박스로 설정해요.
enable — 체크박스와의 상호작용을 활성화해요.
set checked — 콜백 없이 체크박스 상태를 체크로 설정해요.
set unchecked — 콜백 없이 체크박스 상태를 언체크로 설정해요.
set indeterminate — 콜백 없이 중간 상태 체크박스로 설정해요.
set determinate — 콜백 없이 결정 상태 체크박스로 설정해요.
set enabled — 콜백 없이 체크박스 상호작용을 활성화해요.
set disabled — 콜백 없이 체크박스 상호작용을 비활성화해요.
attach events(selector, behavior) — 체크박스 이벤트를 다른 요소에 연결해요.
is disabled — 요소가 상호작용에 비활성화되었는지 반환해요.
is enabled — 요소가 상호작용에 활성화되었는지 반환해요.
is determinate — 요소가 결정 상태인지 반환해요.
is indeterminate — 요소가 중간 상태인지 반환해요.
is radio — 요소가 라디오 선택인지 반환해요.
is checked — 요소가 현재 체크되었는지 반환해요.
is unchecked — 요소가 체크되지 않았는지 반환해요.
can change — 요소가 변경될 수 있는지 반환해요.
should allow check — 요소가 체크될 수 있는지 반환해요 (이미 체크됐는지 또는 beforeChecked가 취소할지 확인해요).
should allow uncheck — 요소가 언체크될 수 있는지 반환해요 (이미 언체크됐는지 또는 beforeUnchecked가 취소할지 확인해요).
should allow determinate — 요소가 결정 상태가 될 수 있는지 반환해요 (이미 결정 상태인지 또는 beforeDeterminate가 취소할지 확인해요).
should allow indeterminate — 요소가 중간 상태가 될 수 있는지 반환해요 (이미 중간 상태인지 또는 beforeIndeterminate가 취소할지 확인해요).
can uncheck — 요소가 언체크될 수 있는지 반환해요.
destroy — 인스턴스를 파괴하고 모든 이벤트를 제거해요.

Checkbox

이 설정들은 체크박스에 특정하며, 그 동작의 매개변수를 결정해요.

이름	기본값	설명
`uncheckable`	`auto`	`true`/`false`로 설정하면 입력이 선택 없음을 허용할지 여부를 결정해요. `auto`는 라디오 박스에 대해서만 이 동작을 허용하지 않도록 설정해요.
`fireOnInit`	`false`	체크 상태에 대한 콜백을 초기화와 변경 시 모두 발생시킬지 여부예요.
`enableEnterKey`	`true`	포커스된 체크박스에서 ENTER 키를 누르면 그것도 토글할지 여부예요.

콜백	컨텍스트	설명
`onChange`	HTML input element	체크박스가 체크되거나 언체크된 후의 콜백이에요.
`onChecked`	HTML input element	체크박스가 체크된 후의 콜백이에요.
`onIndeterminate`	HTML input element	체크박스가 중간 상태로 설정된 후의 콜백이에요.
`onDeterminate`	HTML input element	체크박스가 결정 상태로 설정된 후의 콜백이에요.
`onUnchecked`	HTML input element	체크박스가 언체크된 후의 콜백이에요.
`beforeChecked`	HTML input element	체크박스가 체크되기 전의 콜백이에요. `false`를 반환하면 변경을 취소할 수 있어요.
`beforeIndeterminate`	HTML input element	체크박스가 중간 상태로 설정되기 전의 콜백이에요. `false`를 반환하면 변경을 취소할 수 있어요.
`beforeDeterminate`	HTML input element	체크박스가 결정 상태로 설정되기 전의 콜백이에요. `false`를 반환하면 변경을 취소할 수 있어요.
`beforeUnchecked`	HTML input element	체크박스가 언체크되기 전의 콜백이에요. `false`를 반환하면 변경을 취소할 수 있어요.
`onEnable`	HTML input element	체크박스가 활성화된 후의 콜백이에요.
`onDisable`	HTML input element	체크박스가 비활성화된 후의 콜백이에요.

Module

이 설정들은 모든 모듈에 공통이며, 컴포넌트가 콘텐츠를 DOM 속성에 연결하는 방식과 모듈의 디버깅 설정을 정의해요.

이름	기본값	설명
`name`	`Checkbox`	로그 문장에 사용되는 이름이에요.
`namespace`	`checkbox`	이벤트 네임스페이스예요.
`selector`	`{ input : 'input[type=checkbox], input[type=radio]', label : 'label' }`	모듈의 부분을 찾는 데 사용되는 선택자예요.
`className`	`{ checked : 'checked', disabled : 'disabled', radio : 'radio', readOnly : 'read-only' }`	요소 상태를 결정하는 데 사용되는 클래스 이름이에요.
`silent`	`false`	모든 콘솔 출력을 조용히 만들어요.
`debug`	`false`	콘솔에 디버그 출력을 보여줘요.
`performance`	`true`	성능 메트릭과 함께 `console.table` 출력을 보여줘요.
`verbose`	`false`	디버그 출력에 모든 내부 행동을 포함해요.
`errors`	`{ method : 'The method you called is not defined.' }`	오류 메시지 설정이에요.

더 알아보기 (Learn more)

체크박스로 선택형 UI를 다양하게 만들 수 있어요. 드롭다운 선택이나 폼 검증도 궁금하다면 Dropdown과 Form 문서를 함께 살펴보세요.