JQuery - TriState CheckBox

Question

Tôi đang cố gắng tìm một plugin kiểm tra ba trạng thái. Tuy nhiên, mọi plugin tôi tìm thấy đều dựa trên cấu trúc phân cấp (giống như cấu trúc thư mục) của các phần tử. Tôi chỉ có một phần tử hộp kiểm duy nhất mà tôi muốn tạo hộp kiểm ba chiều.

Có ai biết plugin jquery sẽ thực hiện việc này không? Tôi thực sự ngạc nhiên khi tôi không tìm thấy nó hoạt động trên http://plugins.jquery.com/.

Cảm ơn bạn đã nhập.

Answer 1

Hãy thử plugin này, http://plugins.jquery.com/project/tristate-checkbox

Answer 2

Các bài là một chút cũ nhưng, đây https://gist.github.com/2886026

Tôi đã sửa đổi plugin này để làm như vậy:

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

Answer 3

tôi đi qua các cùng một vấn đề - tôi cần nó hiển thị: bật/tắt/bỏ qua

Dựa trên các biểu tượng vailable trong jquery ui() Tôi tạo ra đoạn mã sau (Tôi biết nó không phải là một plugin, nhưng wasnt rằng cần thiết trong trường hợp của tôi):

HTML tôi sử dụng là:

<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"}]'/> 

Việc kiểm soát lấy json mảng trong dữ liệu nhà nước-giá trị cho bao nhiêu tiểu bang như bạn muốn xoay qua:

• giá trị: giá trị đó sẽ được nhập vào đầu vào
• lớp: lớp css (es) mà span mới sẽ có
• tiêu đề: tiêu đề bắt buộc mà sẽ được thiết lập trong khoảng thời gian tạo

Về cơ bản nó tạo ra một yếu tố <span class="data-state-class + classOfState" title="titleOfState"> và nhấp chuột cập nhật nó bằng cách cacling qua danh sách giá trị nhất định.

Tôi mã hóa nó để nó thậm chí cho phép thay đổi thông qua các phương tiện khác (tức là thiết lập giá trị của đầu vào trực tiếp) và cập nhật "điều khiển" khi $ ("đầu vào"). Change(); sự kiện được kích hoạt.

Mã jquery để xử lý nó:

/* 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(); 
}); 

Việc kiểm soát cũng là một phần của Form Controls của tôi Thư viện trên https://github.com/corinis/jsForm/wiki/Controls.

Answer 4

Một số câu trả lời này hơi lỗi thời kể từ khi jQuery redid trang web plugin của họ.

Các hộp kiểm "Tristate" (không xác định) được tích hợp ngay vào JavaScript và dễ dàng đặt chúng vào trạng thái đó bằng cách chỉ cần đặt thuộc tính trên chúng.Thông tin thêm: http://css-tricks.com/indeterminate-checkboxes/

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

Có một plugin có sẵn ở đây trên trang web jQuery plugin mới cung cấp chức năng: http://plugins.jquery.com/tristate-checkbox/

Ba quốc gia được kiểm tra, kiểm soát, và không xác định. Nó cung cấp trạng thái không xác định tùy thuộc vào việc tất cả các hộp kiểm con có được kiểm tra hay không.

Answer 5

xem câu trả lời của tôi để Tri-state Check box in HTML?:

đề nghị của tôi sẽ được sử dụng

• ba ký tự unicode thích hợp cho ba trạng thái ví dụ & # x2753;, & # x2705;, & # x274C;
• một trường nhập văn bản đơn giản (size = 1)
• không biên giới
• chỉ đọc
• hiển thị không có con trỏ
• handler onclick để chuyển qua ba tiểu bang

Xem ví dụ tại địa chỉ:

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

nguồn HTML:

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

hay như trong dòng javascript:

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

mã nguồn Javascript:

<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

tôi chạy ngang qua này hai lót từ 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; 
}); 

Tôi usint này trên https://github.com/zevero/jquery-checkbox-table mà sẽ ra mắt vào cuối ngày hôm nay.