HTML의 3 상태 확인란?

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/

HTML 소스 :

<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; 
       };" />

자바 스크립트 소스 코드 :

<script type="text/javascript" charset="utf-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');
  }

</script>

---

You can use an indeterminate state: http://css-tricks.com/indeterminate-checkboxes/. It's supported by the browsers out of the box and don't require any external js libraries.

---

You can use radio groups to achieve that functionality:

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

---

I think that the most semantic way is using readonly attribute that checkbox inputs can have. No css, no images, etc; a built-in HTML property!

See Fiddle:
http://jsfiddle.net/chriscoyier/mGg85/2/

As described here in last trick: http://css-tricks.com/indeterminate-checkboxes/

---

Like @Franz answer you can also do it with a select. For example:

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

With this you can also give a concrete value that will be send with the form, I think that with javascript indeterminate version of checkbox, it will send the underline value of the checkbox.

At least, you can use it as a callback when javascript is disabled. For example, give it an id and in the load event change it to the javascript version of the checkbox with indeterminate status.

---

Besides all cited above, there are jQuery plugins that may help too:

for individual checkboxes:

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

for tree-like behavior checkboxes:

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

EDIT Both libraries uses the 'indeterminate' checkbox attribute, since this attribute in Html5 is just for styling (https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state), the null value is never sent to the server (checkboxes can only have two values).

To be able to submit this value to the server, I've create hidden counterpart fields which are populated on form submission using some javascript. On the server side, you'd need to check those counterpart fields instead of original checkboxes, of course.

I've used the first library (standalone checkboxes) where it's important to:

• Initialize the checked, unchecked, indeterminate values
• use .val() function to get the actual value
• Cannot make work .state (probably my mistake)

Hope that helps.

---

Refering to @BoltClock answer, here is my solution for a more complex recursive method:

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

It might not be the most pretty solution but it works fine for me and is quite flexible.

I use two data objects defining the container:

data-select-all="chapter1"

and the elements itself:

data-select-some="chapter1"

Both having the same value. The combination of both data-objects within one checkbox allows sublevels, which are scanned recursively. Therefore two "helper" functions are needed to prevent the change-trigger.

---

You'll need to use javascript/css to fake it.

Try here for an example: http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

---

It's possible to have HTML form elements disabled -- wouldn't that do? Your users would see it in one of three states, i.e. checked, unchecked, and disabled, which would be greyed out and not clickable. To me, that seems similar to "null" or "not applicable" or whatever you're looking for in that third state.

---

There's a simple JavaScript tri-state input field implementation at https://github.com/supernifty/tristate-checkbox

---

The jQuery plugin "jstree" with the checkbox plugin can do this.

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

-Matt

참고URL : https://stackoverflow.com/questions/1726096/tri-state-check-box-in-html