Trójstanowe pole wyboru w HTML?

Nie ma sposobu, aby przycisk sprawdzania trzech stanów (tak, nie, null) w HTML, prawda?

Czy są jakieś proste sztuczki lub obejścia bez konieczności samodzielnego renderowania całości?

Edycja - dzięki komentarzowi Janusa Troelsena znalazłem lepsze rozwiązanie:

HTML5 definiuje właściwość dla pól wyboru o nazwie indeterminate

Zobacz przewodnik referencyjny w3c . Aby pole wyboru wyglądało na nieokreślone wizualnie, ustaw je na true:

element.indeterminate = true;

Oto skrzypce Janusa Troelsena . Należy jednak pamiętać, że:

• indeterminatePaństwo nie może być ustawiony w znacznikach HTML, można to zrobić tylko poprzez JavaScript (zobacz tę próbę JSfiddle i to szczegółowy artykuł w sztuczek CSS )

• Ten stan nie zmienia wartości pola wyboru, jest jedynie wizualną wskazówką, która maskuje rzeczywisty stan wejścia.

• Test przeglądarki: działał dla mnie w Chrome 22, Firefox 15, Opera 12 iz powrotem do IE7. Jeśli chodzi o przeglądarki mobilne, przeglądarka Android 2.0 i mobilna Safari na iOS 3.1 nie obsługują tego.

Poprzednia odpowiedź

Inną alternatywą byłaby gra z przezroczystością pola wyboru dla stanu „niektóre wybrane” (tak jak robił to Gmail w poprzednich wersjach). Będzie to wymagało trochę javascript i klasy CSS. Tutaj umieściłem konkretny przykład, który obsługuje listę z elementami możliwymi do zaznaczenia i polem wyboru, które pozwala wybrać wszystkie / żadne z nich. To pole wyboru pokazuje stan „niektóre wybrane”, gdy wybrane są niektóre elementy listy.

Biorąc pod uwagę pole wyboru z identyfikatorem #select_alli kilka pól wyboru z klasą .select_one,

Klasa CSS, która zanika pole wyboru „wybierz wszystko”, wyglądałaby następująco:

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

A kod JS obsługujący trójstanowe pole wyboru zaznacz wszystko jest następujący:

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

Możesz spróbować tutaj: http://jsfiddle.net/98BMK/

Mam nadzieję, że to pomoże!

Możesz użyć indeterminateatrybutu IDL HTML na inputelementach.

Moja propozycja dotyczyłaby

• trzy odpowiednie znaki Unicode dla trzech stanów, np. ❓, ✅, ❌
• zwykłe pole tekstowe (rozmiar = 1)
• bez granic
• tylko czytać
• nie wyświetlać kursora
• obsługi onclick, aby przełączyć się przez trzy stany

Zobacz przykłady na:

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

Możesz użyć stanu nieokreślonego: http://css-tricks.com/indeterminate-checkboxes/ . Jest obsługiwany przez przeglądarki po wyjęciu z pudełka i nie wymaga żadnych zewnętrznych bibliotek js.

Możesz użyć grup radiowych, aby osiągnąć tę funkcję:

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

Myślę, że najbardziej semantycznym sposobem jest użycie readonlyatrybutu, który mogą mieć pola wyboru. Bez css, bez obrazów itp. wbudowana właściwość HTML!

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

Jak opisano tutaj w ostatniej sztuczce: http://css-tricks.com/indeterminate-checkboxes/

Oto działający przykład z użyciem wspomnianego indeterminateatrybutu :

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>

Po prostu uruchom fragment kodu, aby zobaczyć, jak to wygląda.

Podobnie jak odpowiedź @Franz, możesz to również zrobić za pomocą zaznaczenia. Na przykład:

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

Dzięki temu możesz również podać konkretną wartość, która zostanie wysłana z formularzem, myślę, że przy nieokreślonej wersji checkboxa javascript wyśle ​​wartość podkreślenia checkboxa.

Przynajmniej możesz go użyć jako wywołania zwrotnego, gdy javascript jest wyłączony. Na przykład, nadaj mu identyfikator iw zdarzeniu load zmień go na wersję javascript pola wyboru o nieokreślonym statusie.

Oprócz wszystkich wymienionych powyżej, istnieją wtyczki jQuery, które również mogą pomóc:

dla poszczególnych checkboxów:

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

dla pól wyboru zachowań drzewiastych:

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

EDYCJA Obie biblioteki używają atrybutu pola wyboru „ nieokreślony ”, ponieważ ten atrybut w języku Html5 służy tylko do stylizacji ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ), wartość null nigdy nie jest wysyłana na serwer (pola wyboru mogą mieć tylko dwie wartości).

Aby móc przesłać tę wartość do serwera, utworzyłem ukryte pola odpowiedników, które są wypełniane podczas przesyłania formularza za pomocą javascript. Oczywiście po stronie serwera trzeba by zaznaczyć te pola odpowiedników zamiast oryginalnych pól wyboru.

Użyłem pierwszej biblioteki (samodzielne pola wyboru), w której ważne jest, aby:

• Zainicjuj zaznaczone, niezaznaczone, nieokreślone wartości
• użyj funkcji .val (), aby uzyskać rzeczywistą wartość
• Cannot make work .state (prawdopodobnie mój błąd)

Mam nadzieję, że to pomoże.

Oto inny przykład z prostym jQuery i właściwością 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>

W odniesieniu do odpowiedzi @BoltClock , oto moje rozwiązanie dla bardziej złożonej metody rekurencyjnej:

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

Może nie jest to najpiękniejsze rozwiązanie, ale dla mnie działa dobrze i jest dość elastyczne.

Używam dwóch obiektów danych definiujących kontener:

data-select-all="chapter1"

i same elementy:

data-select-some="chapter1"

Obie mają tę samą wartość. Połączenie obu obiektów danych w jednym polu wyboru umożliwia stosowanie podpoziomów, które są skanowane rekurencyjnie. Dlatego potrzebne są dwie funkcje „pomocnicze”, aby zapobiec wyzwalaniu zmiany.

Aby to sfałszować, musisz użyć javascript / css.

Wypróbuj tutaj przykład: http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

Możliwe jest wyłączenie elementów formularza HTML - czy to nie zadziała? Twoi użytkownicy widzieliby go w jednym z trzech stanów, tj. Zaznaczony, niezaznaczony i wyłączony, który byłby wyszarzony i nie można go było kliknąć. Wydaje mi się, że jest to podobne do „nie dotyczy” lub „nie dotyczy” lub czegokolwiek, czego szukasz w tym trzecim stanie.

Istnieje prosta implementacja trójstanowego pola wejściowego JavaScript pod adresem https://github.com/supernifty/tristate-checkbox

Wtyczka jQuery "jstree" z wtyczką checkbox może to zrobić.

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

-Matt