如果我删除fieldset和div，则父子复选框不起作用

Question

I have a code which is working properly for parent/child/subchild relation but I want to remove fieldset and div from my html code and I will add tr and td for each line and then how to modify jquery code for the same.

html code

<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 /> &nbsp; &nbsp;<input
            type="radio" name="cnstates" id="OT" checked />Sub Child 1<br />
        &nbsp; &nbsp;<input type="radio" name="cnstates" id="AT" checked />Sub Child 2
        <br /> <input type="checkbox" value="" name=""country""
            class="childCheckBox" /> Child 2 <br /> &nbsp; &nbsp;<input
            type="radio" name="usstates" id="NY" checked />Sub Child 1<br />
        &nbsp; &nbsp;<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 /> &nbsp; &nbsp;<input
            type="radio" name="instates" id="MU" checked />Sub Child 1<br />
        &nbsp; &nbsp;<input type="radio" name="instates" id="DL" checked />Sub Child 2
        <br /> <input type="checkbox" value="" name="country"
            class="childCheckBox" /> Child 2<br /> &nbsp; &nbsp;<input
            type="radio" name="rustates" id="MW" checked />Sub Child 1<br />
        &nbsp; &nbsp;<input type="radio" name="rustates" id="DC" />Sub Child 2
    </div>
</fieldset>

Jquery which is working fine with fieldset but how to modify it for tr and td which I will add

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

jsfiddle.net/YDgHN/43/

I want to implement parent,child & subchild relation on below code

<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">&nbsp;</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">&nbsp;</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) If select all is checked all check box except sub child checbox should be checked

2) if parent is select all child except subchild should be checked

3) if all child are select parent should be select.

Regards, Pise

Answer 1

Here's your new 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);
    }
);