Hộp kiểm Tri-bang trong HTML?

Không có cách nào để có nút kiểm tra ba trạng thái (có, không, không) trong HTML, phải không?

Có bất kỳ thủ thuật đơn giản hoặc công việc xung quanh mà không cần phải tự hoàn thành mọi thứ?

Biên tập - Nhờ nhận xét của Janus Troelsen, tôi đã tìm thấy một giải pháp tốt hơn:

HTML5 định nghĩa một thuộc tính cho các hộp kiểm được gọi là indeterminate

Xem hướng dẫn tham khảo w3c . Để làm cho hộp kiểm xuất hiện trực quan không xác định, đặt nó thành đúng:

element.indeterminate = true;

Đây là bí ẩn của Janus Troelsen . Lưu ý, tuy nhiên, rằng:

• Các indeterminatenhà nước không thể được thiết lập trong đánh dấu HTML, nó chỉ có thể được thực hiện thông qua Javascript (xem này kiểm tra JSfiddle và điều này bài viết chi tiết trong thủ thuật CSS )

• Trạng thái này không thay đổi giá trị của hộp kiểm, nó chỉ là một dấu hiệu trực quan che dấu trạng thái thực của đầu vào.

• Kiểm tra trình duyệt: Đã hoạt động với tôi trong Chrome 22, Firefox 15, Opera 12 và quay lại IE7. Về trình duyệt di động, trình duyệt Android 2.0 và Safari di động trên iOS 3.1 không hỗ trợ cho trình duyệt này.

Câu trả lời trước

Một lựa chọn khác sẽ được chơi với tính minh bạch hộp kiểm cho "một số lựa chọn" nhà nước (như Gmail không sử dụng để làm trong các phiên bản trước). Nó sẽ yêu cầu một số javascript và một lớp CSS. Ở đây tôi đặt một ví dụ cụ thể xử lý danh sách với các mục có thể kiểm tra và hộp kiểm cho phép chọn tất cả / không có mục nào trong số đó. Hộp kiểm này hiển thị trạng thái "một số được chọn" khi một số mục trong danh sách được chọn.

Đưa ra một hộp kiểm có ID #select_allvà một số hộp kiểm với một lớp .select_one,

Lớp CSS mờ dần hộp kiểm "chọn tất cả" sẽ như sau:

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

Và mã JS xử lý trạng thái ba của hộp kiểm chọn tất cả là như sau:

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

Bạn có thể dùng thử tại đây: http://jsfiddle.net/98BMK/

Mong rằng sẽ giúp!

Bạn có thể sử dụng indeterminatethuộc tính IDL của HTML trên inputcác phần tử.

Đề xuất 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ụ,,
• trường nhập văn bản thuần túy (size = 1)
• không biên giới
• chỉ đọc
• không hiển thị con trỏ
• xử lý onclick để chuyển qua ba trạng thái

Xem ví dụ tại:

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

Bạn có thể sử dụng trạng thái không xác định: http://css-tricks.com/indeterminate-checkboxes/ . Nó được hỗ trợ bởi các trình duyệt bên ngoài và không yêu cầu bất kỳ thư viện js bên ngoài nào.

Bạn có thể sử dụng các nhóm radio để đạt được chức năng đó:

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

Tôi nghĩ rằng cách thức ngữ nghĩa nhất là sử dụng readonlythuộc tính mà đầu vào hộp kiểm có thể có. Không css, không hình ảnh, vv; một thuộc tính HTML tích hợp!

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

Như được mô tả ở đây trong thủ thuật cuối cùng: http://css-tricks.com/indeterminate-checkboxes/

Dưới đây là một ví dụ có thể chạy được bằng cách sử dụng indeterminatethuộc tính được đề cập :

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>

Chỉ cần chạy đoạn mã để xem nó trông như thế nào.

Giống như @Franz trả lời, bạn cũng có thể làm điều đó với một lựa chọn. Ví dụ:

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

Với điều này, bạn cũng có thể đưa ra một giá trị cụ thể sẽ được gửi cùng với biểu mẫu, tôi nghĩ rằng với phiên bản hộp kiểm không xác định javascript, nó sẽ gửi giá trị gạch chân của hộp kiểm.

Ít nhất, bạn có thể sử dụng nó như một cuộc gọi lại khi javascript bị vô hiệu hóa. Ví dụ: cung cấp cho nó một id và trong sự kiện tải, hãy đổi nó thành phiên bản javascript của hộp kiểm với trạng thái không xác định.

Ngoài tất cả các trích dẫn ở trên, còn có các plugin jQuery cũng có thể giúp ích:

cho các hộp kiểm riêng lẻ:

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

cho các hộp kiểm hành vi giống như cây:

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

EDIT Cả hai thư viện đều sử dụng thuộc tính hộp kiểm ' không xác định ', vì thuộc tính này trong Html5 chỉ dành cho kiểu dáng ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ), giá trị null không bao giờ được gửi đến máy chủ (hộp kiểm chỉ có thể có hai giá trị).

Để có thể gửi giá trị này đến máy chủ, tôi đã tạo các trường đối tác ẩn được điền trên biểu mẫu bằng cách sử dụng một số javascript. Về phía máy chủ, dĩ nhiên bạn cần kiểm tra các trường đối tác đó thay vì các hộp kiểm ban đầu.

Tôi đã sử dụng thư viện đầu tiên (hộp kiểm độc lập) trong đó điều quan trọng là:

• Khởi tạo các giá trị được kiểm tra, không được kiểm tra, không xác định
• sử dụng hàm .val () để lấy giá trị thực
• Không thể thực hiện công việc .state (có thể là lỗi của tôi)

Mong rằng sẽ giúp.

Ở đây ví dụ khác với jQuery và thuộc tính đơn giản 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>

Đề cập đến câu trả lời @BoltClock , đây là giải pháp của tôi cho phương pháp đệ quy phức tạp hơn:

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

Nó có thể không phải là giải pháp đẹp nhất nhưng nó hoạt động tốt với tôi và khá linh hoạt.

Tôi sử dụng hai đối tượng dữ liệu xác định vùng chứa:

data-select-all="chapter1"

và các yếu tố:

data-select-some="chapter1"

Cả hai đều có cùng giá trị. Sự kết hợp của cả hai đối tượng dữ liệu trong một hộp kiểm cho phép các cấp dưới, được quét theo cách đệ quy. Do đó, cần có hai chức năng "trợ giúp" để ngăn chặn trình kích hoạt thay đổi.

Bạn sẽ cần sử dụng javascript / css để giả mạo nó.

Hãy thử ở đây để lấy ví dụ: http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

Có thể tắt các thành phần biểu mẫu HTML - điều đó có xảy ra không? Người dùng của bạn sẽ thấy nó ở một trong ba trạng thái, tức là đã được kiểm tra, không được kiểm tra và bị vô hiệu hóa, sẽ bị mờ đi và không thể nhấp được. Đối với tôi, điều đó có vẻ tương tự như "null" hoặc "không áp dụng" hoặc bất cứ điều gì bạn đang tìm kiếm ở trạng thái thứ ba đó.

Có một triển khai trường nhập ba trạng thái JavaScript đơn giản tại https://github.com/supernifty/tristate-checkbox

Plugin jQuery "jstree" với plugin hộp kiểm có thể làm điều này.

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

-Matt