กล่องกาเครื่องหมาย Tri-state ในรูปแบบ HTML?

ไม่มีวิธีที่จะมีปุ่มตรวจสอบสามสถานะ (ใช่, ไม่, ไม่มีค่า) ใน HTML ใช่ไหม?

มีกลเม็ดหรือวิธีแก้ปัญหาง่ายๆโดยไม่ต้องทำเองทั้งหมดหรือไม่?

แก้ไข - ขอบคุณที่ความคิดเห็นของ Janus Troelsen ฉันพบทางออกที่ดีกว่า:

HTML5 กำหนดคุณสมบัติสำหรับช่องทำเครื่องหมายที่เรียกว่า indeterminate

ดูคู่มืออ้างอิง W3C ในการทำให้ช่องทำเครื่องหมายปรากฏไม่ระบุตัวตนทางสายตาให้ตั้งค่าเป็นจริง:

element.indeterminate = true;

นี่คือซอ Janus Troelsen ของ อย่างไรก็ตามโปรดทราบว่า:

• indeterminateรัฐไม่สามารถตั้งค่าในการมาร์กอัป HTML ก็สามารถทำได้เฉพาะผ่านทางจาวาสคริปต์ (เห็นนี้ทดสอบ JSfiddleและบทความรายละเอียดในเทคนิค CSS )

• สถานะนี้จะไม่เปลี่ยนค่าของช่องทำเครื่องหมายมันเป็นเพียงคิวภาพที่ปิดบังสถานะที่แท้จริงของอินพุต

• การทดสอบเบราว์เซอร์: ทำงานสำหรับฉันใน Chrome 22, Firefox 15, Opera 12 และกลับไปที่ IE7 เบราว์เซอร์ Android 2.0 และ Safari mobile บน iOS 3.1 ไม่รองรับเบราว์เซอร์มือถือ

คำตอบก่อนหน้า

อีกหนึ่งทางเลือกที่จะเล่นด้วยความโปร่งใสช่องสำหรับ "บางคนเลือก" ของรัฐ (เช่น Gmail ไม่ใช้ในการทำในรุ่นก่อนหน้า) มันจะต้องมีจาวาสคริปต์และคลาส CSS ที่นี่ฉันใส่ตัวอย่างเฉพาะที่จัดการรายการที่มีรายการที่ตรวจสอบได้และช่องทำเครื่องหมายที่ช่วยให้เลือกทั้งหมด / ไม่มีพวกเขา ช่องทำเครื่องหมายนี้แสดงสถานะ "บางคนเลือก" เมื่อมีการเลือกรายการบางรายการ

ป.ร. ให้ทำเครื่องหมายในช่องที่มีรหัส#select_allและอีกหลายช่องทำกับชั้นเรียน.select_one,

คลาส CSS ที่ทำเครื่องหมายในช่อง "เลือกทั้งหมด" จะเป็นดังต่อไปนี้:

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

และรหัส JS ที่จัดการ tri-state ของเลือกทั้งหมดช่องทำเครื่องหมายดังต่อไปนี้:

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

คุณสามารถลองได้ที่นี่: http://jsfiddle.net/98BMK/

หวังว่าจะช่วย!

คุณสามารถใช้indeterminateแอตทริบิวต์ IDLของ HTML กับinputองค์ประกอบ

ข้อเสนอของฉันจะใช้

• อักขระยูนิโค้ดที่เหมาะสมสามตัวสำหรับสามสถานะเช่น❌, ✅, ❌
• ช่องป้อนข้อความธรรมดา (ขนาด = 1)
• ไม่มีพรมแดน
• อ่านเท่านั้น
• ไม่แสดงเคอร์เซอร์
• ตัวจัดการ onclick เพื่อสลับผ่านทั้งสามรัฐ

ดูตัวอย่างได้ที่:

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

คุณสามารถใช้รัฐไม่แน่นอน: http://css-tricks.com/indeterminate-checkboxes/ เบราว์เซอร์รองรับและไม่จำเป็นต้องใช้ไลบรารี js ภายนอก

คุณสามารถใช้กลุ่มวิทยุเพื่อให้สามารถใช้งานได้:

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

ฉันคิดว่าวิธีที่มีความหมายมากที่สุดคือการใช้readonlyคุณลักษณะที่อินพุตของช่องทำเครื่องหมายสามารถมีได้ ไม่มี CSS ไม่มีภาพ ฯลฯ คุณสมบัติ HTML ในตัว!

ดู Fiddle:
http://jsfiddle.net/chriscoyier/mGg85/2/

ตามที่อธิบายไว้ที่นี่ในเคล็ดลับสุดท้าย: http://css-tricks.com/indeterminate-checkboxes/

นี่คือตัวอย่างที่รันได้โดยใช้indeterminateแอ็ตทริบิวต์ที่กล่าวถึง:

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>

เพียงเรียกใช้โค้ดขนาดสั้นเพื่อดูว่ามีลักษณะอย่างไร

กดไลค์ @Franz คุณสามารถเลือกได้ด้วย ตัวอย่างเช่น:

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

ด้วยสิ่งนี้คุณสามารถให้ค่าที่เป็นรูปธรรมที่จะส่งพร้อมกับฟอร์มฉันคิดว่าด้วยช่องทำเครื่องหมายรุ่นจาวาสคริปต์ที่ไม่ทราบแน่ชัดก็จะส่งค่าขีดเส้นใต้ของช่องทำเครื่องหมาย

อย่างน้อยคุณสามารถใช้เป็นโทรกลับได้เมื่อปิดการใช้งานจาวาสคริปต์ ตัวอย่างเช่นให้รหัสและในเหตุการณ์โหลดเปลี่ยนเป็นรุ่นจาวาสคริปต์ของช่องทำเครื่องหมายที่มีสถานะไม่แน่นอน

นอกจากที่กล่าวถึงข้างต้นทั้งหมดแล้วยังมีปลั๊กอิน jQuery ที่อาจช่วยได้เช่นกัน:

สำหรับช่องทำเครื่องหมายแต่ละรายการ:

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

สำหรับช่องทำเครื่องหมายพฤติกรรมเหมือนต้นไม้:

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

แก้ไข ทั้งสองไลบรารีใช้แอททริบิวต์' ไม่ทราบแน่ชัด ' เนื่องจากแอททริบิวต์นี้ใน Html5 เป็นเพียงการกำหนดสไตล์ ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ) ค่า null จะไม่ถูกส่งไปยังเซิร์ฟเวอร์ (ช่องทำเครื่องหมายสามารถมีได้สองค่าเท่านั้น)

เพื่อให้สามารถส่งค่านี้ไปยังเซิร์ฟเวอร์ฉันได้สร้างเขตข้อมูลคู่ที่ซ่อนอยู่ซึ่งบรรจุในการส่งแบบฟอร์มโดยใช้จาวาสคริปต์ ที่ฝั่งเซิร์ฟเวอร์คุณจะต้องตรวจสอบช่องอื่น ๆ แทนช่องทำเครื่องหมายเดิมแน่นอน

ฉันใช้ห้องสมุดแรก (ช่องทำเครื่องหมายแบบสแตนด์อโลน) ซึ่งเป็นสิ่งสำคัญที่:

• เริ่มต้นค่าที่เลือกไม่ถูกตรวจสอบและไม่ได้กำหนด
• ใช้ฟังก์ชัน .val () เพื่อรับค่าจริง
• ไม่สามารถทำงานได้สถานะ (อาจเป็นความผิดพลาดของฉัน)

หวังว่าจะช่วย

นี่คือตัวอย่างอื่น ๆ ด้วย jQuery และ property แบบง่าย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 นี่คือคำตอบสำหรับวิธีการเรียกซ้ำที่ซับซ้อนมากขึ้น:

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

มันอาจไม่ใช่วิธีที่สวยที่สุด แต่ใช้ได้ดีสำหรับฉันและค่อนข้างยืดหยุ่น

ฉันใช้วัตถุข้อมูลสองตัวกำหนดภาชนะ:

data-select-all="chapter1"

และองค์ประกอบเอง:

data-select-some="chapter1"

ทั้งสองมีค่าเท่ากัน การรวมกันของวัตถุข้อมูลทั้งสองภายในหนึ่งช่องทำเครื่องหมายช่วยให้ sublevels ซึ่งจะสแกนซ้ำ ดังนั้นจึงจำเป็นต้องใช้ฟังก์ชัน "ผู้ช่วยเหลือ" สองรายการเพื่อป้องกันการเปลี่ยนแปลงทริกเกอร์

คุณจะต้องใช้ javascript / css เพื่อทำการปลอม

ลองที่นี่เพื่อเป็นตัวอย่าง: http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

เป็นไปได้หรือไม่ที่จะปิดใช้งานองค์ประกอบแบบฟอร์ม HTML - จะไม่ทำเช่นนั้นหรือ ผู้ใช้ของคุณจะเห็นมันในหนึ่งในสามสถานะเช่นถูกทำเครื่องหมายไม่เลือกและปิดใช้งานซึ่งจะเป็นสีเทาและไม่สามารถคลิกได้ สำหรับฉันดูเหมือนจะคล้ายกับ "null" หรือ "ไม่เกี่ยวข้อง" หรือสิ่งที่คุณกำลังมองหาในสถานะที่สามนั้น

มีการใช้งานฟิลด์ป้อนข้อมูลแบบสามสถานะ JavaScript อย่างง่ายที่ https://github.com/supernifty/tristate-checkbox

ปลั๊กอิน jQuery "jstree" ที่มีปลั๊กอินช่องทำเครื่องหมายสามารถทำได้

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

-Matt