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

Question

I am developing a checkbox tree where i need three states of checkbox, I know there is two state of checkbox, but i have to use indeterminate

1. Check

2. Uncheck

3. Indeterminate

How can i developed these type of tree using javascript?

Answer 1

  <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);
      });
    });

Answer 2

You can use already developed plugins (or read their code if you are just curious how to manipulate the checkboxes' states). Just drop one of them. If you choose niTree plugin I can help you with any questions concerning the code:

https://github.com/AlexLibs/niTree

Answer 3

This is a trivial one from scratch: http://jsfiddle.net/pimvdb/MgYs7/1/ .

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

Answer 4

I would use values -1, 0 and 1. Every onclick the attached function checks its value.

-1 = Indeterminate
0 = unchecked
1 = checked.

If 0 change to 1
If 1 change to -1
If -1 change to 0

If the value = -1 add this property (eg via jQuery) to the checkbox: $(checkbox).prop("indeterminate", true);
For every other value the indeterminate value should be false .
See this link for example

Of course your tree logic should act on what its value is going to be eg unchecking children or setting parent at indeterminate.