Question

嗨朋友我是初学者（初级）前端我想学点点什么。

我的问题是如何做手风琴复选框，但我的嵌套复选框这是演示click to see demo

这是我做的演示

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>No Title</title>
</head>
<body> 

       <div class="new-checkbox">
                 <ul>
                    <li><input type="checkbox" id="input1"><label for="input1">kategori <strong>(1)</strong></label>
                        <ul>
                        <li><input type="checkbox" id="input11"><label for="input11">kategori<strong>(11)</strong></label></li>
                        <li><input type="checkbox" id="input12"><label for="input12">kategori <strong>(12)</strong></label></li>
                        <li><input type="checkbox" id="input13"><label for="input13">kategori <strong>(13)</strong></label></li>
                        </ul>
                    </li>
                    <li><input type="checkbox" id="input2"><label for="input2">kategori <strong>(2)</strong></label></li>
                    <li><input type="checkbox" id="input3"><label for="input3">kategori <strong>(3)</strong></label>
                    <ul>
                        <li><input type="checkbox" id="input31"><label for="input31">kategori <strong>(31)</strong></label></li>
                        <li><input type="checkbox" id="input32"><label for="input32">kategori <strong>(32)</strong></label></li>
                        <li><input type="checkbox" id="input33"><label for="input33">kategori <strong>(33)</strong></label>
                                <ul>
                                <li><input type="checkbox" id="input331"><label for="input331">kategori <strong>(331)</strong></label></li>
                                <li><input type="checkbox" id="input332"><label for="input332">kategori <strong>(332)</strong></label></li>
                                <li><input type="checkbox" id="input333"><label for="input333">kategori <strong>(333)</strong></label></li>
                                </ul>
                        </li>
                    </ul>
                    </li>
                    </ul>
       </div><!--new-checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>

CSS

.new-checkbox ul{
            padding:0;
            margin:0;
            list-style:none;
            margin-left: 30px;
            font: normal 11px/16px "Segoe UI", Arial, Sans-serif;
        }
        .new-checkbox ul:first-child{
            margin-left: 0;
        }
        .new-checkbox ul li {margin: 3px 0;}
       .new-checkbox input[type="checkbox"] {
            display:none;
        }
        .new-checkbox label {
          cursor: pointer;
        }
        .new-checkbox input[type="checkbox"] + label:before {
          border: 1px solid #ffffff;
          content: "\00a0";
          display: inline-block;
          font: 16px/1em sans-serif;
          height: 13px;
          width: 13px;
          margin: 2px .25em 0 0;
          padding:0;
          vertical-align: top;
          border: solid 1px #1375b3;
         color: #1375b3;
         opacity: .50;

        }
        .new-checkbox input[type="checkbox"]:checked + label:before {
          background: #fff;
            color: #1375b3;
            content: "\2714";
          text-align: center;
            box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
            opacity: 1;
        }
        .new-checkbox input[type="checkbox"]:checked + label:after {
          font-weight: bold;
        }
        .new-checkbox ul li:before {
              content: "\25b6";
              display: inline-block;
              margin: 2px 0 0;
              width: 13px;
              height: 13px;
              vertical-align: top;
              text-align: center;
              color: #e74c3c;
              font-size: 8px;
              line-height: 13px;
              cursor:pointer;
        }
        .new-checkbox input[type="checkbox"]
        {
            display: none;
        }
        .new-checkbox  li
        {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }
        .new-checkbox input[type="checkbox"][id]:checked ~ li::before
          {
              content: "\25bc";
          }
        .new-checkbox  input[type="checkbox"][id]:not(:checked) ~ ul
        {
            display: none;
        }

JS

$(document).ready(function() {
  $('.new-checkbox input[type=checkbox]').on("change", function() {
    var $close = $(this).closest('ul').closest('li');
      if ($(this).is(':checked')) {
        // check all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', true);
        // check all parents
        $(this).parent().prev().prop('checked', true);
      } else {
        // uncheck all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', false);
      }
    while ($close.length) {
      $che = $close.find('ul input:checkbox');
      $checked = $close.find('ul input:checkbox:checked');
      $close.children('input').prop('checked', $che.length == $checked.length);
      $close = $($close.children('input')).closest('ul').closest('li');
      console.log($che.length, $checked.length);
    }
  });

});

see on codepen

Answer 1

您可以使用parentsUntil（）迭代每个父元素，然后查看它是否有一个选中的复选框，如

＆＃13;

$(document).ready(function() {
  $('.new-checkbox input[type=checkbox]').on("change", function() {
    $(this).parent().find('input[type=checkbox]').prop('checked', this.checked);

    if (!this.checked) {
      $(this).parentsUntil('.new-checkbox > ul', 'li').children('input[type=checkbox]').prop('checked', function() {
        return $(this).siblings('ul').find('input[type=checkbox]').is(':checked')
      })
    }

  });

});

＆＃13;

.new-checkbox ul {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-left: 30px;
  font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
  margin-left: 0;
}
.new-checkbox ul li {
  margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
  display: none;
}
.new-checkbox label {
  cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
  border: 1px solid #ffffff;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 13px;
  width: 13px;
  margin: 2px .25em 0 0;
  padding: 0;
  vertical-align: top;
  border: solid 1px #1375b3;
  color: #1375b3;
  opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
  background: #fff;
  color: #1375b3;
  content: "\2714";
  text-align: center;
  box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
  opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
  font-weight: bold;
}
.new-checkbox ul li:before {
  content: "\25b6";
  display: inline-block;
  margin: 2px 0 0;
  width: 13px;
  height: 13px;
  vertical-align: top;
  text-align: center;
  color: #e74c3c;
  font-size: 8px;
  line-height: 13px;
  cursor: pointer;
}
.new-checkbox input[type="checkbox"] {
  display: none;
}
.new-checkbox li {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
  content: "\25bc";
}
.new-checkbox input[type="checkbox"][id]:not(:checked) ~ ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-checkbox">
  <ul>
    <li>
      <input type="checkbox" id="input1">
      <label for="input1">kategori <strong>(1)</strong>
      </label>
      <ul>
        <li>
          <input type="checkbox" id="input11">
          <label for="input11">kategori<strong>(11)</strong>
          </label>
        </li>
        <li>
          <input type="checkbox" id="input12">
          <label for="input12">kategori <strong>(12)</strong>
          </label>
        </li>
        <li>
          <input type="checkbox" id="input13">
          <label for="input13">kategori <strong>(13)</strong>
          </label>
        </li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="input2">
      <label for="input2">kategori <strong>(2)</strong>
      </label>
    </li>
    <li>
      <input type="checkbox" id="input3">
      <label for="input3">kategori <strong>(3)</strong>
      </label>
      <ul>
        <li>
          <input type="checkbox" id="input31">
          <label for="input31">kategori <strong>(31)</strong>
          </label>
        </li>
        <li>
          <input type="checkbox" id="input32">
          <label for="input32">kategori <strong>(32)</strong>
          </label>
        </li>
        <li>
          <input type="checkbox" id="input33">
          <label for="input33">kategori <strong>(33)</strong>
          </label>
          <ul>
            <li>
              <input type="checkbox" id="input331">
              <label for="input331">kategori <strong>(331)</strong>
              </label>
            </li>
            <li>
              <input type="checkbox" id="input332">
              <label for="input332">kategori <strong>(332)</strong>
              </label>
            </li>
            <li>
              <input type="checkbox" id="input333">
              <label for="input333">kategori <strong>(333)</strong>
              </label>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<!--new-checkbox-->

＆＃13;

CSS复选框切换

1 个答案: