使用不确定的javascript HTML创建复选框树的最佳实践是什么？

我正在开发一个复选框树，其中我需要三种状态的复选框，我知道有两种状态的复选框，但我必须使用不确定

检查

取消勾选

不确定

---

如何使用javascript开发这些类型的树？

我将使用值-1、0和1。附加函数的每次单击都会检查其值

-1=不确定
0=未选中
1=选中。

如果0变为1
如果1变为-1
如果-1更改为0

如果值=-1，则将此属性（例如通过jQuery）添加到复选框：

$（复选框）.prop（“不确定”，true）

对于每一个其他值，不确定值应为
false


例如，见

当然，您的树逻辑应该根据其值进行操作，例如取消选中子项或将父项设置为不确定。
这是一个从零开始的小问题：


不确定复选框


高大的东西


建筑


巨人


安德烈


保罗班扬




两个三明治




短小的东西


蓝精灵


蘑菇


一个三明治




$（函数（）{
//显然点击是更好的改变？因为IE？
$（'input[type=“checkbox”]”）。更改（函数（e）{
var checked=$（this）.prop（“checked”），
容器=$（this）.parent（），
兄弟姐妹=容器。兄弟姐妹（）；
container.find（'input[type=“checkbox”]”）.prop({
不确定：错误，
勾选：勾选
});
功能检查（el）{
var parent=el.parent（）.parent（），
全部=正确；
el.sides（）.each（函数（））{
返回all=（$（this）.children（'input[type=“checkbox”]”）.prop（“checked”）==checked）；
});
如果（全部选中（&D）{
parent.children（'input[type=“checkbox”]”）.prop({
不确定：错误，
勾选：勾选
});
检查兄弟姐妹（父母）；
}else if（全部&！选中）{
parent.children（'input[type=“checkbox”]”）.prop（“checked”，checked）；
parent.children（'input[type=“checkbox”]'））.prop（“不确定”，“parent.find”（'input[type=“checkbox”]：checked'））.length>0）；
检查兄弟姐妹（父母）；
}否则{
el.parents（“li”）.children（'input[type=“checkbox”]”）.prop({
不确定：对，
勾选：假
});
}
}
支票（集装箱）；
});
});
您可以使用已经开发的插件（如果您只是想知道如何操作复选框的状态，也可以阅读它们的代码）。
放下其中一个。如果您选择plugin，我可以帮助您解决有关代码的任何问题：

你的意思是实际使用一个带有三种状态的复选框输入元素？这并没有解释如何进行设置。我已经修改了答案，并提示将复选框设置为不确定。如果你确实阅读了链接到的网站，它说明这不会改变状态。始终只有两种状态。唯一可能的方法是通过复选框及其当前值在视觉上进行交互。除非您实现自己的三态复选框控件，这正是我所想的问题。如果您勾选根节点，则子节点会正确地在树上的所有父节点上设置不确定，但是如果你再次勾选，它不会勾选树上所有的父母，它会使他们保持不确定（即使所有的事情都再次勾选）
var span = document.getElementById('span');
span.setAttribute('data-state', 0);

span.onselectstart = function() { return false }; // prevent selecting, doesn't look too good

span.onclick = function() {
    var state = span.getAttribute('data-state') - 0; // convert to number

    if(state === 0) { // set next symbol
        span.innerHTML = 'V';
    } else if(state === 1) {
        span.innerHTML = 'X';
    } else {
        span.innerHTML = '';
    }

    span.setAttribute('data-state', (state + 1) % 3); // set state; 3 will be 0 again
};

  <div id="page-wrap">

   <h1>Indeterminate Checkboxes</h1>

 <ul>
    <li>
        <input type="checkbox" name="tall" id="tall">
        <label for="tall">Tall Things</label>

        <ul>
             <li>
                 <input type="checkbox" name="tall-1" id="tall-1">
                 <label for="tall-1">Buildings</label>
             </li>
             <li>
                 <input type="checkbox" name="tall-2" id="tall-2">
                 <label for="tall-2">Giants</label>

                 <ul>
                     <li>
                         <input type="checkbox" name="tall-2-1" id="tall-2-1">
                         <label for="tall-2-1">Andre</label>
                     </li>
                     <li>
                         <input type="checkbox" name="tall-2-2" id="tall-2-2">
                         <label for="tall-2-2">Paul Bunyan</label>
                     </li>
                 </ul>
             </li>
             <li>
                 <input type="checkbox" name="tall-3" id="tall-3">
                 <label for="tall-3">Two sandwiches</label>
             </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="short" id="short">
        <label for="short">Short Things</label>

        <ul>
             <li>
                 <input type="checkbox" name="short-1" id="short-1">
                 <label for="short-1">Smurfs</label>
             </li>
             <li>
                 <input type="checkbox" name="short-2" id="short-2">
                 <label for="short-2">Mushrooms</label>
             </li>
             <li>
                 <input type="checkbox" name="short-3" id="short-3">
                 <label for="short-3">One Sandwich</label>
             </li>
        </ul>
    </li>
</ul>

</div>

   $(function() {
      // Apparently click is better chan change? Cuz IE?
      $('input[type="checkbox"]').change(function(e) {
      var checked = $(this).prop("checked"),
          container = $(this).parent(),
          siblings = container.siblings();

      container.find('input[type="checkbox"]').prop({
          indeterminate: false,
          checked: checked
      });

      function checkSiblings(el) {
          var parent = el.parent().parent(),
              all = true;

          el.siblings().each(function() {
              return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
          });

          if (all && checked) {
              parent.children('input[type="checkbox"]').prop({
                  indeterminate: false,
                  checked: checked
              });
              checkSiblings(parent);
          } else if (all && !checked) {
              parent.children('input[type="checkbox"]').prop("checked", checked);
              parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
              checkSiblings(parent);
          } else {
              el.parents("li").children('input[type="checkbox"]').prop({
                  indeterminate: true,
                  checked: false
              });
          }
        }

        checkSiblings(container);
      });
    });