JQuery - TriState CheckBox

Question

Sto provando a trovare un plug-in di casella di controllo a tre stati. Tuttavia, ogni plugin che trovo si basa su una gerarchia di elementi (come una struttura di cartelle). Ho solo un singolo elemento checkbox che voglio creare una casella di controllo a tre vie.

Qualcuno sa di un plug-in jQuery che lo farà? Sono davvero sorpreso di non aver trovato quello che funziona su http://plugins.jquery.com/.

Grazie per l'input.

Answer 1

Prova questo plugin, http://plugins.jquery.com/project/tristate-checkbox

Answer 2

Il post è un po 'vecchio ma, qui https://gist.github.com/2886026

Ho modificato questo plugin per farlo:

http://webworld-develop.blogspot.com.br/2011/04/small-and-quick-tri-state-checkbox.html

Answer 3

mi sono imbattuto nel stesso problema - ne avevo bisogno per mostrare: abilitare/disabilitare/ignorare

Sulla base delle icone a vailable in jQuery UI() Ho creato seguente codice (So che la sua non è un plugin, ma che era necessario nel mio caso):

Il codice HTML che uso è:

<input type="text" class="rotatestate" value="true" 
data-state-style="cursor:pointer" 
data-state-class="ui-icon" 
data-state-values='[{"value":"true","class":"ui-icon-check","title":"title for true"},{"value":"false","class":"ui-icon-radio-off","title":"title for off"},{"value":"null","class":"ui-icon-cancel","title":"title for third state"}]'/> 

Il comando prende il JSON array in-stato-valori di dati per il maggior numero di stati come si desidera ruotare attraverso:

• valore: il valore che verrà immesso nell'input
• classe: classe CSS (es) che il nuovo arco sarà avere
• titolo: un titolo opzionale che verrà impostato nel giro creato

Si crea in pratica un elemento <span class="data-state-class + classOfState" title="titleOfState"> e fare clic su Aggiornamenti dal cacling attraverso il determinato elenco di valori.

L'ho codificato in modo tale da consentire anche il cambiamento tramite altri mezzi (ad esempio, impostare direttamente il valore dell'ingresso) e aggiorna il "controllo" quando $ ("input"). Change(); l'evento è attivato.

Il codice jQuery che gestisce:

/* rotatestate stontrol */ 
$("input.rotatestate", location).each(function(){ 
    var states = $(this).attr("data-state-values"); 
    var defaultClass = $(this).attr("data-state-class"); 
    // no need to continue if there are no states 
    if(!states) { 
     return; 
    } 

    try { 
     states = JSON.parse(states); 
    } catch (ex) { 
     // do not need to continue if we cannot parse the states 
     return; 
    } 

    var stateControl = $("<span></span>"); 
    if($(this).attr("data-state-style")) { 
     stateControl.attr("style", $(this).attr("data-state-style")); 
    } 
    stateControl.data("states", states); 
    stateControl.data("control", this); 
    stateControl.data("activeState", null); 
    $(this).data("control", stateControl); 
    if(defaultClass) { 
     stateControl.addClass(defaultClass); 
    } 

    // click on the control starts rotating 
    stateControl.click(function(){ 
     var cState = $(this).data().activeState; 
     var cStates = $(this).data().states; 
     var control = $(this).data().control; 
     var newState = null; 

     if(cState != null) { 
      // go to the 'next' state 
      for(var i = 0; i < cStates.length; i++) { 
       if(cStates[i].value === cState.value) { 
        // last element 
        if(i === cStates.length - 1) { 
         newState = cStates[0]; 
        } else { 
         newState = cStates[i+1]; 
        } 
        break; 
       } 
      } 
     } else { 
      // no state yet - just set the first 
      newState = cStates[0]; 
     } 

     $(control).attr("value", newState.value); 
     // trigger change 
     $(control).change(); 
    }); 

    // make sure to update state if the value is changed 
    $(this).change(function(){ 
     var control = $($(this).data().control); 
     var cState = control.data().activeState; 
     var cStates = control.data().states; 

     if(cState != null) { 
      // remove "old state" 
      control.removeClass(cState['class']); 
     } 

     // add new State 
     var val = $(this).val(); 
     $.each(cStates, function(){ 
      if(this.value === val) { 
       control.data().activeState = this; 
       if(this.title) { 
        control.attr("title", this.title); 
       } 
       control.addClass(this['class']); 
       return false; 
      } 
     }); 
    }); 

    // trigger initial state 
    $(this).change(); 
    $(this).after(stateControl); 
    $(this).hide(); 
}); 

Il controllo è anche parte del mio Form Controls Library https://github.com/corinis/jsForm/wiki/Controls.

Answer 4

Alcune di queste risposte sono un po 'obsolete da quando jQuery ha ridisegnato il proprio sito di plug-in.

Le caselle di controllo "Tristate" (indeterminate) sono incorporate direttamente in JavaScript ed è facile impostarle in tale stato semplicemente impostando una proprietà su di esse.Per saperne di più: http://css-tricks.com/indeterminate-checkboxes/

$("#some-checkbox").prop("indeterminate", true);

C'è un plugin disponibile qui sul nuovo sito plugin per jQuery che fornisce tale funzionalità: http://plugins.jquery.com/tristate-checkbox/

I tre stati sono controllati, senza controllo, e indeterminato. Forniva lo stato indeterminato a seconda che tutte le caselle di controllo figlio siano selezionate o meno.

Answer 5

Vedere la mia risposta a Tri-state Check box in HTML?:

La mia proposta sarebbe utilizzando

• tre adeguati caratteri Unicode per i tre stati per esempio & # X2753;, & # x2705;, & # x274C;
• un campo di immissione testo (size = 1)
• nessun bordo
• sola lettura
• display N. cursore
• gestore onclick per passare attraverso i tre stati

Vedere esempi a:

• http://service.bitplan.com/com/bitplan/tristate/tristate.php
• http://jsfiddle.net/wf_bitplan_com/941std72/8/

sorgente HTML:

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

o come javascript in linea:

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

JavaScript codice sorgente:

<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> 

Answer 6

corro in questo due-liner da https://css-tricks.com/indeterminate-checkboxes/

$('#some_div').on('click','input[type=checkbox]', function(){ 
    if (this.readOnly) this.checked=this.readOnly=false; 
    else if (!this.checked) this.readOnly=this.indeterminate=true; 
}); 

sto USInt questo su https://github.com/zevero/jquery-checkbox-table che sarà disponibile entro la giornata.