在CheckBox树视图中无法正常工作

问题描述 投票:2回答:1

当我点击电子产品ID value = option它将启用复选框笔记本电脑,电视,麦克风除了电子新。如果我点击电子新的Id value =option1它应该启用所有复选框,如电子,电子新,笔记本电脑,TVS,麦克风,但在我的代码中,它不起作用。

$(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;
  }
}
 });
body {
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

ul {
  list-style: none;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

li {
  margin-top: 1em;
}

label {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>
      <input type="checkbox" id="option"><label for="option"> Electronics</label>
      <ul>
	   <li>
	   <input type="checkbox" id="option1"><label for="option1"> Electronics new</label>
	   <ul>
        <li><label><input type="checkbox" class="subOption"> Laptops</label></li>
        <li><label><input type="checkbox" class="subOption"> TVs</label></li>
        <li><label><input type="checkbox" class="subOption"> Microphones</label></li>
		</ul>
		</li>
      </ul>
    </li>
  </ul>
</div>

JSFiddle Demo

javascript jquery html css
1个回答
2
投票

你需要解决一些问题:

  • 首先,你的无序列表结构搞砸了。你需要将每个<ul>放在另一个<li>中,如果你正在筑巢它们。
  • 您没有包含检查何时选中“Electronics new”的功能。

$(document).ready(function() {
  var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementById('option'),
    checkall1 = document.getElementById('option1');

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

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

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

  checkall1.onclick = function() {
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = this.checked;
      checkall.checked = this.checked;
    }
  }
});
body {
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

ul {
  list-style: none;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

li {
  margin-top: 1em;
}

label {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>
      <input type="checkbox" id="option"><label for="option"> Electronics</label>
    </li>
    <ul>
      <li>
        <input type="checkbox" id="option1"><label for="option1"> Electronics new</label>
      </li>
      <li>
        <ul>
          <li><label><input type="checkbox" class="subOption"> Laptops</label></li>
          <li><label><input type="checkbox" class="subOption"> TVs</label></li>
          <li><label><input type="checkbox" class="subOption"> Microphones</label></li>
        </ul>
      </li>
    </ul>
  </ul>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.