javascript - 如何创建具有不确定状态的自定义复选框

我试图获得自定义复选框的不确定状态，但无法实现它。我已经尝试过 css 但它现在正在工作。

这是我试图实现的目标:

$(document).ready(function() {

  var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementById('option');

  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
      var checkedCount = document.querySelectorAll('input.subOption:checked').length;

      checkall.checked = checkedCount > 0;
      checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
    }
  }

  checkall.onclick = function() {
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = this.checked;
    }
  }

  // intermedieate class

  // $("input[type='checkbox'].subOption").change(function(){
  //     var a = $("input[type='checkbox'].subOption");
  //     if(a.length == a.filter(":checked").length){
  //         alert('all checked');
  //     }else{
  //         alert('one checked');
  //         $(this).parent().parent().parent().prev().find('span').addClass('intermediate');
  //         $(this).parent().parent().parent().prev().find('input:checked');
  //     }
  // });

});

/* Customize the label (the container) */

.container-check {
  position: relative;
  padding-left: 25px;
  margin-bottom: 11px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: normal;
}

.container-list ul {
  list-style: none;
  margin-left: -14px;
}


/* Hide the browser's default checkbox */

.container-check input {
  position: absolute;
  opacity: 0;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: solid 1px #626579;
  border-radius: 4px;
}


/* On mouse-over, add a grey background color */

.container-check:hover input~.checkmark {
  background-color: #fff;
}


/* When the checkbox is checked, add a blue background */

.container-check input:checked~.checkmark {
  background-color: #25a5bd;
  border: solid 1px #25a5bd;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container-check input:checked~.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.container-check .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* disabled checkmark */

.container-check.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


/* Intermediate css */

.container-check .intermediate:after {
  left: 5px;
  top: 2px;
  width: 0px;
  height: 9px;
  border: solid white;
  border-width: 0px 0px 6px 3px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-list">
  <ul>
    <li>
      <label class="container-check" for="option"><input id="option" type="checkbox"><span class="checkmark"></span>
                            Checkbox Selected</label>

      <ul>
        <li>
          <label class="container-check">
                                <input class="subOption" type="checkbox">
                                <span class="checkmark"></span>
                                Checkbox label 01</label>
        </li>
        <li>
          <label class="container-check">
                                <input class="subOption" type="checkbox">
                                <span class="checkmark"></span>
                                Checkbox label 02</label>
        </li>
        <li>
          <label class="container-check">
                                <input class="subOption" type="checkbox">
                                <span class="checkmark"></span>
                                Checkbox label 03</label>
        </li>
      </ul>
    </li>
  </ul>
</div>

最佳答案

这是一个 CodePen

这是一篇关于 indeterminate checkbox 的文章

$('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: true
      });
    }
  }
  checkSiblings(container);
});

body {
  padding: 20px;
}

ul {
  list-style: none;
  margin: 5px 20px;
}

li {
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

编辑

这是 更新的 Pedrams 版本

$(document).ready(function() {

  var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementById('option');

  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
      var checkedCount = document.querySelectorAll('input.subOption:checked').length;

      checkall.checked = checkedCount > 0;
      checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
    }
  }

  checkall.onclick = function() {
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = this.checked;
    }
  }
});

.container-check input:indeterminate~.checkmark {
  background: #25a5bd;
}

.container-check input:indeterminate~.checkmark:before {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0, -50%);
  width: 80%;
  height: 3px;
  background: white;
}


/* Customize the label (the container) */

.container-check {
  position: relative;
  padding-left: 25px;
  margin-bottom: 11px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: normal;
}

.container-list ul {
  list-style: none;
  margin-left: -14px;
}


/* Hide the browser's default checkbox */

.container-check input {
  position: absolute;
  opacity: 0;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: solid 1px #626579;
  border-radius: 4px;
}


/* When the checkbox is checked, add a blue background */

.container-check input:checked~.checkmark {
  background-color: #25a5bd;
  border: solid 1px #25a5bd;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container-check input:checked~.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.container-check .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* disabled checkmark */

.container-check.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


/* Intermediate css */

.container-check .intermediate:after {
  left: 5px;
  top: 2px;
  width: 0px;
  height: 9px;
  border: solid white;
  border-width: 0px 0px 6px 3px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-list">
  <ul>
    <li>
      <label class="container-check" for="option"><input id="option" type="checkbox"><span class="checkmark"></span>
      Checkbox Selected</label>
      <ul>
        <li>
          <label class="container-check">
          <input class="subOption" type="checkbox">
          <span class="checkmark"></span>
          Checkbox label 01</label>
        </li>
        <li>
          <label class="container-check">
          <input class="subOption" type="checkbox">
          <span class="checkmark"></span>
          Checkbox label 02</label>
        </li>
        <li>
          <label class="container-check">
          <input class="subOption" type="checkbox">
          <span class="checkmark"></span>
          Checkbox label 03</label>
        </li>
      </ul>
    </li>
  </ul>
</div>

关于javascript - 如何创建具有不确定状态的自定义复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50344349/