javascript - 使用动态父子复选框的问题

Question

这是live demo

问题:复选框不能以动态方式工作，并且多个 div 也应该动态工作，在示例中有 5 个。

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>

<div>
  <input type="checkbox" class="parentCheckBox" /> Parent 1  <a onclick="document.getElementById('div_1').style.display='';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png" height="20" width="20"></a>  <a onclick="document.getElementById('div_1').style.display='none';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/minus_remove_green.png" height="20" width="20"></a><br />
  <div id="div_1" style="display:none;">
    <ul>
    <li><input type="checkbox" class="childCheckBox" />Child 1-1 </li>
    <li><input type="checkbox" class="childCheckBox" />Child 1-2 </li>
    <li><input type="checkbox" class="childCheckBox" />Child 1-3 </li>
    </ul>    
  </div>
</div>

<div>
  <input type="checkbox" class="parentCheckBox" /> Parent 2  <a onclick="document.getElementById('div_2').style.display='';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png" height="20" width="20"></a>  <a onclick="document.getElementById('div_2').style.display='none';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/minus_remove_green.png" height="20" width="20"></a><br />
  <div id="div_2" style="display:none;">
    <ul>
    <li><input type="checkbox" class="childCheckBox" />Child 2-1 </li>
    <li><input type="checkbox" class="childCheckBox" />Child 2-2 </li>
    <li><input type="checkbox" class="childCheckBox" />Child 2-3 </li> 
    </ul>
  </div>    
</div>

<div>
  <input type="checkbox" class="parentCheckBox" /> Parent 3  <a onclick="document.getElementById('div_3').style.display='';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png" height="20" width="20"></a>  <a onclick="document.getElementById('div_3').style.display='none';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/minus_remove_green.png" height="20" width="20"></a><br />
  <div id="div_3" style="display:none;">
    <ul>
    <li><input type="checkbox" class="childCheckBox" />Child 3-1 </li>
    <li><input type="checkbox" class="childCheckBox" />Child 3-2 </li>
    <li><input type="checkbox" class="childCheckBox" />Child 3-3 </li>
    </ul>
  </div>    
</div>

<div>
  <input type="checkbox" class="parentCheckBox" /> Parent 4  <a onclick="document.getElementById('div_4').style.display='';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png" height="20" width="20"></a>  <a onclick="document.getElementById('div_4').style.display='none';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/minus_remove_green.png" height="20" width="20"></a><br />
<div id="div_4" style="display:none;">
 <ul>
    <li><input type="checkbox" class="childCheckBox" />Child 4-1 </li>
    <li><input type="checkbox" class="childCheckBox" />Child 4-2 </li>
    <li><input type="checkbox" class="childCheckBox" />Child 4-3 </li>
    </ul>
 </div>    

尝试过这个:

$(document).ready(
function() {
    //clicking the parent checkbox should check or uncheck all child checkboxes
    $(".parentCheckBox").click(
        function() {
            $(this).parents('div:eq(0)').find('.childCheckBox').attr('checked', this.checked);
        }
    );
    //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
    $('.childCheckBox').click(
        function() {
            if ($(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
                $(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked', false);
            if (this.checked == true) {
                var flag = true;
                $(this).parents('div:eq(0)').find('.childCheckBox').each(
                    function() {
                        if (this.checked == false)
                            flag = false;
                    }
                );
                $(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked', flag);
            }
        }
      );
    }
 );

Answer 1

试试这个:

$(document).on('change', '.parentCheckBox', function() {
    var that = $(this);
  that.closest('div').find('.childCheckBox').prop('checked', that.is(':checked'));
});

$(document).on('change', '.childCheckBox', function() {
    var that = $(this);
  var par = that.closest('ul');
  var c = par.find('.childCheckBox').filter(':checked').length;
  var parChk = par.closest('div').parent().find('.parentCheckBox');
  var checked = c > 0;
  parChk.prop('checked', checked);
  console.log(checked);
});

检查DEMO

编辑

如果理解正确，您希望仅当所有子元素都被选中时才选中父复选框。 要实现此行为，只需更改此行:

var checked = c > 0; 

至

var checked = c == par.find('.childCheckBox').length;

已更新DEMO