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

我有这个treetable，并希望有级联复选框选择。

当我点击root时，它会假设点击所有的孩子

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

我当前的代码没有检查child2的子child1和2

我如何修改我的代码才能实现这一目标？

求助：

好的，这有希望帮助那些遇到这篇文章的人希望实现这样的treetable。 F. Calderan指出了一个好的代码，但它只做了一半的工作，好像你点击一个父母而不是祖父母，没有任何反应。

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

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

Answer 1

如果我很好理解，我认为你必须改变

$('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]')

与

$('#update_ics_table').find('input:checkbox[id ^= "child-of-' + id + '"]')

请注意^=而不是= 我认为更改是因为当您选中system复选框时，您的脚本只会查找child-of-SYSTEM复选框，甚至不会查看child-of-SYSTEMspb

Answer 2

很抱歉，您的代码编写得不好，我已经用不同的DOM结构替换了表

您在http://jsfiddle.net/ch4nd4n/3e2hd/结帐了一个有效的示例并相应地修改了您的代码。代码的作用是按类名查找父级，并使用id搜索包含子复选框的DOM。

简化的HTML

<div>
    <input class="ic_parent" id='1' type="checkbox" value="SYSTEM" />p1
    <ul class="ic_parent1">
        <li>
            <input class="ic_child" type="checkbox" value="SYSTEM" />c1
        </li>
        <li>
            <input class="ic_child" type="checkbox" value="SYSTEM" />c2
        </li>
    </ul>
    <input class="ic_parent" id='2' type="checkbox" value="SYSTEM" />p2
    <ul class="ic_parent2">
        <li>
            <input class="ic_child" type="checkbox" value="SYSTEM" />c3
        </li>
        <li>
            <input class="ic_child" type="checkbox" value="SYSTEM" />c4
        </li>
    </ul>
</div>

和Javascript来检查或取消选中

$(".ic_parent").click(function() {
    if ($(this).attr('checked')) {
        $('.ic_parent' + $(this).attr('id')).find('.ic_child').attr('checked', 'checked');
    } else {
        $('.ic_parent' + $(this).attr('id')).find('.ic_child').removeAttr('checked');
    }
});

Answer 3

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

我在http://jsfiddle.net/jRAcq/

做了一个简单的例子

选择root复选框时，选择多个子项和子项

3 个答案: