我有一个适用于父/子/子关系的代码，但我想从我的html代码中删除fieldset和div，我将为每一行添加tr和td，然后如何修改jquery代码
html代码
<form>
<input type="checkbox" class="mainCheckBox" /> Select All <br />
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Parent 1 <br />
<div class="content">
<input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1<br /> <input
type="radio" name="cnstates" id="OT" checked />Sub Child 1<br />
<input type="radio" name="cnstates" id="AT" checked />Sub Child 2
<br /> <input type="checkbox" value="" name=""country""
class="childCheckBox" /> Child 2 <br /> <input
type="radio" name="usstates" id="NY" checked />Sub Child 1<br />
<input type="radio" name="usstates" id="DC" />Sub Child 2
DC
</div>
</fieldset>
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Parent 2 <br />
<div class="content">
<input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1<br /> <input
type="radio" name="instates" id="MU" checked />Sub Child 1<br />
<input type="radio" name="instates" id="DL" checked />Sub Child 2
<br /> <input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 2<br /> <input
type="radio" name="rustates" id="MW" checked />Sub Child 1<br />
<input type="radio" name="rustates" id="DC" />Sub Child 2
</div>
</fieldset>
Jquery可以正常使用fieldset，但是如何为tr和td修改它我将添加
$(document).ready(
function() {
$('.mainCheckBox').on('change', function(){
$(this).closest('form').find(':checkbox').prop('checked', this.checked);
});
$('input.childCheckBox').change(function() {
$(this).closest('fieldset').find('.parentCheckBox').prop('checked',
$('input.childCheckBox').length === $('input.childCheckBox:checked').length
);
});
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
if (this.checked == true) {
var flag = true;
$(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
}
}
);
}
);
我想实施父母，子女和儿童以下代码的子代关系
<form>
<table width="90%" border="1" cellspacing="0" cellpadding="1">
<tr>
<td colspan="2"><input type="checkbox" class="mainCheckBox" /> Select All
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" class="parentCheckBox" /> Parent 1
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="cnstates" id="OT" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="cnstates" id="AT" checked />Sub
Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="usstates" id="NY" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="usstates" id="DC" />Sub Child 2
</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td colspan="2"><input type="checkbox" class="parentCheckBox" /> Parent 2
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1
<tr>
<td colspan="2"><input type="radio" name="instates" id="MU" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="instates" id="DL" checked />Sub
Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="rustates" id="MW" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="rustates" id="DC" />Sub Child 2</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td colspan="2"><input type="checkbox" class="parentCheckBox" /> Parent 3
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1
<tr>
<td colspan="2"><input type="radio" name="instates" id="MU" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="instates" id="DL" checked />Sub
Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 2</td>
</tr>
<tr>
<td><input type="checkbox" name="rustates" id="MW" checked />Sub
Child 1</td><td><input type="checkbox" name="rustates" id="DC" />Sub Child 2</td>
</tr>
<tr>
</tr>
</table>
</form>
1）如果选中all all，则应检查除子子checbox之外的所有复选框
2）如果选择父项，则应检查除子项以外的所有子项
3）如果所有孩子都选择了父母，则应该选择。
此致 PISE
答案 0 :(得分：0)
这是你的新js。
$('.mainCheckBox').on('change', function(){
$(this).closest('form').find(':checkbox').prop('checked', this.checked);
});
$('input.childCheckBox').change(function() {
parent = $(this).parent().parent().prevAll("tr:has(.parentCheckBox)").find(".parentCheckBox").last();
all_checked = true;
parent.parent().parent().nextUntil("tr:has(.parentCheckBox)").find("[type=checkbox]").each(function(){
if(!$(this).prop("checked")) all_checked = false;
});
parent.prop("checked", all_checked );
select_all = true;
if($(".childCheckBox, .parentCheckBox").not(":checked").length != 0)
select_all = false;
$('.mainCheckBox').prop("checked",select_all);
});
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parent().parent().nextUntil("tr:has(.parentCheckBox)").find("[type=checkbox]").prop('checked', this.checked);
}
);