HTML'de üç durumlu onay kutusu mu?

HTML'de üç durumlu kontrol düğmesi (evet, hayır, null) olmanın bir yolu yoktur, değil mi?

Her şeyi tek başına yapmak zorunda kalmadan basit hileler veya geçici çözümler var mı?

Edit - Janus Troelsen'in yorumu sayesinde daha iyi bir çözüm buldum:

HTML5 adlı onay kutuları için bir özellik tanımlar indeterminate

W3c başvuru kılavuzuna bakın . Onay kutusunun görsel olarak belirsiz görünmesini sağlamak için doğru olarak ayarlayın:

element.indeterminate = true;

İşte Janus Troelsen'in kemanı . Ancak şunu unutmayın:

• Durum indeterminateHTML işaretlemesinde ayarlanamaz, yalnızca Javascript ile yapılabilir (bu JSfiddle testine ve CSS hilelerindeki bu ayrıntılı makaleye bakın )

• Bu durum onay kutusunun değerini değiştirmez, yalnızca girişin gerçek durumunu maskeleyen görsel bir ipucudur.

• Tarayıcı testi: Chrome 22, Firefox 15, Opera 12 ve IE7'ye geri döndü. Mobil tarayıcılarla ilgili olarak, iOS 3.1'deki Android 2.0 tarayıcısı ve Safari mobil desteği desteklemiyor.

Önceki cevap

Başka bir alternatif (Gmail, "bazı seçilmiş" devlet için onay kutusu şeffaflık ile oynamak olurdu gelmez önceki sürümlerinde yapmak için kullanılır). Bazı javascript ve CSS sınıfı gerektirir. Burada, kontrol edilebilir öğeler içeren bir liste ve tümünü / hiçbirini seçmeyi sağlayan bir onay kutusunu işleyen belirli bir örnek koydum. Bazı liste öğeleri seçildiğinde bu onay kutusu "bazı seçili" durumlarını gösterir.

Kimliği #select_allolan bir onay kutusu ve bir sınıfı olan birkaç onay kutusu verildiğinde .select_one,

"Tümünü seç" onay kutusunu kaybeden CSS sınıfı aşağıdaki gibidir:

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

Tümünü seç onay kutusunun üç durumunu işleyen JS kodu şudur:

$('#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);
});

Burada deneyebilirsiniz: http://jsfiddle.net/98BMK/

Umarım yardımcı olur!

Sen HTML'nin kullanabilirsiniz indeterminateIDL niteliğini üzerinde inputelemanları.

Teklifim

• üç durum için üç uygun unicode karakter, örneğin ❓, ✅, ❌
• düz metin giriş alanı (boyut = 1)
• sınır yok
• Sadece oku
• imleç gösterme
• üç eyalet arasında geçiş yapmak için onclick işleyicisi

Örneklere bakın:

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

Belirsiz bir durum kullanabilirsiniz: http://css-tricks.com/indeterminate-checkboxes/ . Kutusundan çıkan tarayıcılar tarafından desteklenir ve harici js kütüphaneleri gerektirmez.

Bu işlevselliği elde etmek için radyo gruplarını kullanabilirsiniz:

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

Ben en semantik yolu readonlyonay kutusu girişlerinin sahip olabileceği özniteliğini kullanmak olduğunu düşünüyorum. Css yok, görüntü yok, vb; yerleşik bir HTML özelliği!

Keman'a bakınız:
http://jsfiddle.net/chriscoyier/mGg85/2/

Burada son numarada açıklandığı gibi: http://css-tricks.com/indeterminate-checkboxes/

Bahsedilen indeterminateözelliği kullanarak çalıştırılabilir bir örnek :

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>

Nasıl göründüğünü görmek için kod snippet'ini çalıştırmanız yeterlidir.

@Franz yanıtı gibi bunu bir seçim ile de yapabilirsiniz. Örneğin:

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

Bu da formu ile gönderilecek somut bir değer verebilir, ben onay kutusunun javascript belirsiz sürümü ile, onay kutusunun alt çizgi değerini göndereceğini düşünüyorum.

En azından javascript devre dışı bırakıldığında geri arama olarak kullanabilirsiniz. Örneğin, bir kimlik verin ve load olayında, belirsiz durumdaki onay kutusunun javascript sürümüne değiştirin.

Yukarıda belirtilenlerin yanı sıra, yardımcı olabilecek jQuery eklentileri de vardır:

ayrı onay kutuları için:

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

ağaç benzeri davranış onay kutuları için:

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

DÜZENLEME Her iki kütüphane 'kullanır belirsiz HTML5 bu niteliği (Stil için sadece olduğundan,' kutusu özelliğini https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ), null değeri hiçbir zaman sunucuya gönderilmez (onay kutularında yalnızca iki değer olabilir).

Bu değeri sunucuya gönderebilmek için, bazı javascript kullanarak form gönderiminde doldurulmuş gizli karşı alanlar oluşturdum. Sunucu tarafında, elbette orijinal onay kutuları yerine bu karşı alanları kontrol etmeniz gerekir.

İlk kütüphaneyi (bağımsız onay kutuları) kullandım:

• İşaretli, denetlenmemiş, belirsiz değerleri başlatın
• gerçek değeri almak için .val () işlevini kullanın
• İş yapamıyorum. Devlet (muhtemelen benim hatam)

Umarım yardımcı olur.

İşte basit jQuery ve özelliği ile diğer Örnek 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 cevabına atıfta bulunarak , daha karmaşık bir özyinelemeli yöntem için benim çözümüm:

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

En güzel çözüm olmayabilir ama benim için iyi çalışıyor ve oldukça esnektir.

Kapsayıcıyı tanımlayan iki veri nesnesi kullanıyorum:

data-select-all="chapter1"

ve elementlerin kendisi:

data-select-some="chapter1"

Her ikisi de aynı değere sahip. Bir onay kutusundaki her iki veri nesnesinin birleşimi, yinelemeli olarak taranan alt düzeylere izin verir. Bu nedenle, değişiklik tetikleyicisini önlemek için iki "yardımcı" işlev gereklidir.

Sahte yapmak için javascript / css kullanmanız gerekir.

Bir örnek için burayı deneyin: http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

HTML form öğelerini devre dışı bırakmak mümkündür - öyle değil mi? Kullanıcılarınız üç durumdan birinde, yani işaretlenmiş, işaretlenmemiş ve devre dışı bırakılmış olarak görünecek ve bunlar gri renkte olacak ve tıklanamayacak. Bana göre, bu "null" veya "uygulanabilir değil" ya da üçüncü durumda aradığın şeye benziyor.

Https://github.com/supernifty/tristate-checkbox adresinde basit bir JavaScript üç durumlu giriş alanı uygulaması var

Onay kutusu eklentisi ile jQuery eklentisi "jstree" bunu yapabilir.

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

-Mat