如何检查/取消选中孩子的孩子里面的复选框＆＃34; li＆＃34;使用jQuery？

Question

我想选中复选框＆＃34; .chkGroup＆＃34;由li＆＃34; #parentLi＆＃34;。

<li id="parentLi">
    <span class="collapsible"></span>
    <span>System</span>
    <ul>
        <li>
            <span class="collapsible"></span>
            <span>Division</span>
            <ul>
                <li>
                    <input class="chkGroup" type="checkbox">
                </li>
            </ul>
        </li>
    </ul>
</li>

Answer 1

尝试这样的事情：

$(function(){
  $('li').click(function(){
    $('#parentLi').find('input[type="checkbox"]').prop('checked', true);
  });
});

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

<li id="parentLi">
    <span class="collapsible"></span>
    <span>System</span>
    <ul>
        <li>
            <span class="collapsible"></span>
            <span>Division</span>
            <ul>
                <li>
                    <input class="chkGroup" type="checkbox">
                </li>
            </ul>
        </li>
    </ul>
</li>

Answer 2

请尝试以下代码：

$(document).ready(function(){
  $("#parentLi input.chkGroup").prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<li id="parentLi">
    <span class="collapsible"></span>
    <span>System</span>
    <ul>
        <li>
            <span class="collapsible"></span>
            <span>Division</span>
            <ul>
                <li>
                    <input class="chkGroup" type="checkbox">
                </li>
            </ul>
        </li>
    </ul>
</li>

Answer 3

尝试关注jQuery代码

$(document).ready(function() {
  $('#parentLi').click(function(e) {
    if (e.target.tagName != 'INPUT') {
      $(this).find('input').prop('checked', function(i, checked) {
        return !checked
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="parentLi">
    <span class="collapsible"></span>
    <span>System</span>
    <ul>
      <li>
        <span class="collapsible"></span>
        <span>Division</span>
        <ul>
          <li>
            <input class="chkGroup" type="checkbox">
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>