HTML의 3 상태 확인란?

HTML에서 3 단계 상태 확인 버튼 (예, 아니오, null)을 가질 수있는 방법이 없습니다.

혼자서 전체를 렌더링하지 않고도 간단한 트릭이나 해결 방법이 있습니까?

편집 — Janus Troelsen의 의견 덕분에 더 나은 해결책을 찾았습니다.

HTML5는이라는 확인란의 속성을 정의합니다. indeterminate

w3c 참조 안내서를 참조하십시오 . 확인란이 시각적으로 부정확하게 표시되도록하려면 true로 설정하십시오.

element.indeterminate = true;

여기 Janus Troelsen의 바이올린이 있습니다. 그러나 다음 사항에 유의하십시오.

• indeterminate상태가 HTML 태그를 설정할 수 없습니다, 단지 (이 참조 자바 스크립트를 통해 수행 할 수 있습니다 JSfiddle 시험 이 CSS 트릭에 자세한 기사 )

• 이 상태는 확인란의 값을 변경하지 않으며 입력의 실제 상태를 숨기는 시각적 신호일뿐입니다.

• 브라우저 테스트 : Chrome 22, Firefox 15, Opera 12에서 IE7로 돌아 왔습니다. 모바일 브라우저와 관련하여 iOS 3.1의 Android 2.0 브라우저 및 Safari 모바일은이를 지원하지 않습니다.

이전 답변

또 다른 대안은 "일부 선택된"상태에 대해 확인란 투명도를 사용하는 것입니다 (Gmail 이 이전 버전에서 사용했듯이). 자바 스크립트와 CSS 클래스가 필요합니다. 여기에 확인 가능한 항목이있는 목록을 처리하는 특정 예제와 해당 항목을 모두 / 없음을 선택할 수있는 확인란이 있습니다. 이 확인란은 일부 목록 항목이 선택된 경우 "일부 선택됨"상태를 표시합니다.

ID #select_all가있는 확인란과 클래스가있는 여러 확인란이 있다면 .select_one,

"모두 선택"체크 상자를 흐리게하는 CSS 클래스는 다음과 같습니다.

.some_selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

그리고 모두 선택 확인란의 3 가지 상태를 처리하는 JS 코드는 다음과 같습니다.

$('#select_all').change (function ()
{
    //Check/uncheck all the list's checkboxes
    $('.select_one').attr('checked', $(this).is(':checked'));
    //Remove the faded state
    $(this).removeClass('some_selected');
});

$('.select_one').change (function ()
{
  if ($('.select_one:checked').length == 0)
      $('#select_all').removeClass('some_selected').attr('checked', false);
  else if ($('.select_one:not(:checked)').length == 0)
      $('#select_all').removeClass('some_selected').attr('checked', true);
  else
      $('#select_all').addClass('some_selected').attr('checked', true);
});

여기에서 시도해 볼 수 있습니다 : http://jsfiddle.net/98BMK/

희망이 도움이됩니다!

요소 에 HTML의 indeterminateIDL 속성 을 사용할 수 있습니다 input.

내 제안은

• 3 가지 상태에 적합한 3 가지 유니 코드 문자 (예 : ❓, ✅, ❌)
• 일반 텍스트 입력 필드 (size = 1)
• 국경이 없다
• 읽기 전용
• 커서를 표시하지 않습니다
• onclick 핸들러는 세 가지 상태를 통해 전환

다음의 예를 참조하십시오.

• http://jsfiddle.net/wf_bitplan_com/941std72/8/

/**
 *  loops thru the given 3 values for the given control
 */
function tristate(control, value1, value2, value3) {
  switch (control.value.charAt(0)) {
    case value1:
      control.value = value2;
    break;
    case value2:
      control.value = value3;
    break;
    case value3:
      control.value = value1;
    break;
    default:
      // display the current value if it's unexpected
      alert(control.value);
  }
}
function tristate_Marks(control) {
  tristate(control,'\u2753', '\u2705', '\u274C');
}
function tristate_Circles(control) {
  tristate(control,'\u25EF', '\u25CE', '\u25C9');
}
function tristate_Ballot(control) {
  tristate(control,'\u2610', '\u2611', '\u2612');
}
function tristate_Check(control) {
  tristate(control,'\u25A1', '\u2754', '\u2714');
}

<input type='text' 
       style='border: none;' 
       onfocus='this.blur()' 
       readonly='true' 
       size='1' 
       value='&#x2753;' onclick='tristate_Marks(this)' />

<input style="border: none;"
       id="tristate" 
       type="text"  
       readonly="true" 
       size="1" 
       value="&#x2753;"  
       onclick="switch(this.form.tristate.value.charAt(0)) { 
     case '&#x2753': this.form.tristate.value='&#x2705;'; break;  
     case '&#x2705': this.form.tristate.value='&#x274C;'; break; 
     case '&#x274C': this.form.tristate.value='&#x2753;'; break; 
       };" />  

불확정 상태 ( http://css-tricks.com/indeterminate-checkboxes/)를 사용할 수 있습니다 . 기본적으로 브라우저에서 지원되며 외부 js 라이브러리가 필요하지 않습니다.

라디오 그룹을 사용하여 해당 기능을 수행 할 수 있습니다.

<input type="radio" name="choice" value="yes" />Yes
<input type="radio" name="choice" value="No" />No
<input type="radio" name="choice" value="null" />null

나는 생각 가장 의미 론적 방법은 사용하는 readonly체크 박스의 입력이 가질 수있는 속성을. CSS 없음, 이미지 없음 등; 내장 HTML 속성!

피들 참조 :
http://jsfiddle.net/chriscoyier/mGg85/2/

마지막 트릭에 설명 된대로 : http://css-tricks.com/indeterminate-checkboxes/

언급 된 indeterminate속성을 사용하는 실행 가능한 예제는 다음과 같습니다 .

const indeterminates = document.getElementsByClassName('indeterminate');
indeterminates['0'].indeterminate  = true;

<form>
  <div>
    <input type="checkbox" checked="checked" />True
  </div>
  <div>
    <input type="checkbox" />False
  </div>
  <div>
    <input type="checkbox" class="indeterminate" />Indeterminate
  </div>
</form>

코드 스 니펫을 실행하여 모양을 확인하십시오.

@Franz 답변과 마찬가지로 선택으로 수행 할 수도 있습니다. 예를 들면 다음과 같습니다.

<select>
  <option></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

이것으로 당신은 또한 양식과 함께 보내질 구체적인 가치를 줄 수 있습니다, 나는 자바 스크립트의 결정되지 않은 버전의 확인란을 사용하면 확인란의 밑줄 값을 보낼 것이라고 생각합니다.

적어도 자바 스크립트가 비활성화되어 있으면 콜백으로 사용할 수 있습니다. 예를 들어, ID를 지정하고로드 이벤트에서 확인되지 않은 상태의 확인란의 Javascript 버전으로 변경하십시오.

위에서 언급 한 모든 것 외에도 다음과 같은 jQuery 플러그인이 있습니다.

개별 확인란의 경우 :

• jQuery-Tristate-Checkbox-plugin : http://vanderlee.github.io/tristate/

트리와 같은 동작 확인란의 경우 :

• jQuery Tristate : http://jlbruno.github.io/jQuery-Tristate-Checkbox-plugin/

편집 두 라이브러리 모두 ' 불확정 '체크 박스 속성을 사용합니다 .Html5 의이 속성은 스타일 지정을위한 것이므로 ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state )에서 null 값은 서버로 전송되지 않습니다 (체크 박스는 두 개의 값만 가질 수 있음).

이 값을 서버에 제출할 수 있도록 일부 자바 스크립트를 사용하여 양식 제출시 채워지는 숨겨진 대응 필드를 작성했습니다. 서버 쪽에서는 물론 원래 확인란 대신 해당 필드를 확인해야합니다.

첫 번째 라이브러리 (독립 실행 형 확인란)를 사용하여 중요한 부분을 수행했습니다.

• 확인, 확인되지 않은 불확실한 값을 초기화하십시오.
• .val () 함수를 사용하여 실제 값을 얻습니다.
• .state 작업을 할 수 없습니다 (아마 나의 실수)

희망이 도움이됩니다.

간단한 jQuery와 속성을 가진 다른 예제 data-checked:

 $("#checkbox")
  .click(function(e) {
    var el = $(this);

    switch (el.data('checked')) {

      // unchecked, going indeterminate
      case 0:
        el.data('checked', 1);
        el.prop('indeterminate', true);
        break;

        // indeterminate, going checked
      case 1:
        el.data('checked', 2);
        el.prop('indeterminate', false);
        el.prop('checked', true);
        break;

        // checked, going unchecked
      default:
        el.data('checked', 0);
        el.prop('indeterminate', false);
        el.prop('checked', false);

    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="checkbox" value="" checked id="checkbox"> Tri-State Checkbox </label>

@BoltClock 답변 참조 를 참조하면 더 복잡한 재귀 방법에 대한 솔루션이 있습니다.

http://jsfiddle.net/gx7so2tq/2/

가장 예쁜 해결책은 아니지만 나에게 잘 작동하며 매우 유연합니다.

컨테이너를 정의하는 두 개의 데이터 객체를 사용합니다.

data-select-all="chapter1"

그리고 요소 자체 :

data-select-some="chapter1"

둘 다 같은 값을가집니다. 하나의 확인란 내에 두 데이터 개체를 조합하면 하위 수준을 재귀 적으로 스캔 할 수 있습니다. 따라서 변경 트리거를 방지하려면 두 개의 "도우미"기능이 필요합니다.

가짜를하려면 javascript / css를 사용해야합니다.

예를 들어 여기에서보십시오 : http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

HTML 양식 요소를 비활성화 할 수 있습니다. 그렇지 않습니까? 사용자는 세 가지 상태 중 하나를 확인할 수 있습니다 (예 : 확인, 선택 해제 및 비활성화). 회색으로 표시되고 클릭 할 수 없습니다. 나에게 이것은 "널"또는 "해당 사항 없음"또는 그 세 번째 주에서 찾고있는 것과 비슷해 보입니다.

https://github.com/supernifty/tristate-checkbox에 간단한 JavaScript 3 상태 입력 필드 구현이 있습니다.

확인란 플러그인이있는 jQuery 플러그인 "jstree"가이를 수행 할 수 있습니다.

http://www.jstree.com/documentation/checkbox

-매트