jQuery复选框操作

Question

我有一个复选框列表，如下所示：

<table>
 <tr><td><input type="checkbox" /> <label>Bla</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 1</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 2</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 3</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 4</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 5</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Bla Sub 6</label></td></tr>
 <tr><td><input type="checkbox" /> <label> Blub</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Blub Sub 1</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Blub Sub 2</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Blub Sub 3</label></td></tr>
 <tr><td><input type="checkbox" /> <label> + Blub Sub 4</label></td></tr>
 <tr><td><input type="checkbox" /> <label> Derp</label></td></tr>
 <tr><td><input type="checkbox" /> <label> etc...</label></td></tr>
</table>

所以，我想为这样的列表启用“选择子类别”功能。不幸的是，对于 ASP.NET 的 ID 渲染混乱，我不能通过它们的 ID 或名称来调用类别，所以我必须读出每个节点的内容并取消/选择所有以 + 开头的复选框。

因此，如果用户选择Bla，则所有子列表+ Bla Sub # 也应该被选择，反之亦然。

这怎么可能？我使用 jQuery，所以应该不会那么难，但我还不能完全了解如何检查列表内容...

Answer 1

这应该可行：

$('ul li:not(:contains("+"))').click(function(
 var current = $(this), check;
 check = (current.attr('checked') ^ true);
 $('ul li:contains("'+current.text()+'") checkbox').attr('checked',check);
}

不过我还没有测试过。它当然应该让您了解所需的内容。如果您有任何问题，请发表评论。

Answer 2

您可以轻松地将类添加到 ASP.net 中的这些子复选框，然后使用 $('.className') 对其进行迭代。

Answer 3

这将使当您选中“Bla”时，所有“+ Bla *”都会被选中：

$('label:not(:contains(+))').prev(':checkbox').click(function(){
    var $this = $(this);
    $('label:contains("'+$this.next('label').text()+'")').prev(':checkbox')
    .attr('checked',$this.is(':checked'));
});