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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFiddle Demo

Answer 1

你需要解决一些问题：

• 首先，你的无序列表结构搞砸了。如果您要将<ul>嵌套在另一个<li>中，则需要另外$(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; } } });。

• 您没有包含检查＆＃34; Electronics new＆＃34;检查。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

$('#trigger').click(function(){
    var send = $('#myselect').val();
    $.ajax({

        data:{
          sent: send
        },
        type: 'POST',
        url: '/delinquincy'
    })
    .done(function(data){
      q1=data[1]
      q2=data[2]
      q3=data[3]
      q4=data[4]

      $('#q1').html(q1)
      $('#q2').html(q2)
      $('#q3').html(q3)
      $('#q4').html(q4)
    })
  })

＆＃13;

＆＃13;

＆＃13;