javascript - 选择根复选框时选择多个子项和子项

Question

javascript(jquery)

$('.ic_parent').change(function(){
  var id = $(this).attr('value')
  while (id.length >0){
    if ($(this).attr('checked')) {
      $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').attr('checked', $(this).attr('checked'));
    }else{
      $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').removeAttr('checked');
    }
    id = $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').attr('value')
  }
});

我有这个树形表并希望选择级联复选框。

当我点击根节点时，它应该会像这样点击所有的子节点

root(selected)
  --child1(selected)
    -----subchild1(selected)
    -----subchild2(selected)
    -----subchild3(selected)
  --child2(selected)
    -----subchild1(selected)
    -----subchild2(selected)

我当前的代码不检查 child2 的 subchild1 和 2

我将如何修改我的代码以使其成为可能？

已解决:

好的，这希望能帮助那些希望实现这种树表的人看到这篇文章。 F. Calderan 指出了一个很好的代码，但它只完成了一半的工作，就好像你点击 parent 而不是祖 parent 一样，没有任何反应。

$('.blah).live('change',function(){
  var id = $(this).attr('value')
  var state = $(this).attr('checked')
  var plat = $(this).attr('platform')
  child_checker = $('#update_cycles_table').find('input:checkbox[key ^= "child-of-' + id + '_'+plat+'"]').attr('checked')
  if (child_checker == "checked"){
    $(this).removeAttr('checked')
  }
  while (id.length >0){
    if (state){
      $('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').attr('checked', 'checked')    
    }else{
      $('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').removeAttr('checked');
    }
  id=($('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').attr('value'));
  }
});

您还需要一个 childcheck 来确保当您单击树的中间时，顶部也未被选中。如果没有检查器，它将无法识别复选框未被选中，也不会执行任何操作。

Answer 1

我建议不要依赖 ID 等来完成此行为。如果您使用 HTML 来正确描述结构，则很容易在 jQuery 中挑选出正确的元素。

我在 http://jsfiddle.net/jRAcq/ 做了一个简单的例子