如何取消选中jQuery中最接近的标题复选框-具有相同类的多行中的多标题

Question

How to uncheck closest header checkbox in jquery. There are multiple headers in different rows, checkbox in header needs to be unchecked when all the child checkboxes are unticked.

Header checkbox is in class 'jq_idtHeaderEdit' and child checkboxes are in class 'jq_border_label'.

1- On child checkbox change event, how to check if all the child checkboxes in class 'jq_border_label' are unticked?

2- If all the child checkboxes are unticked then untick the header in closest class 'jq_idtHeaderEdit'.

Thats how the table looks like;

        <tbody>

        <tr class="jq_idtHeaderRow"></tr>
        <tr class="jq_idtListRow"></tr>
        <tr class="jq_idtHeaderRow"></tr>
        <tr class="jq_idtListRow">
            <td class="jq_idtContentEdit" valign="top" colspan="6">
                <table>
                    <tbody>
                        <tr>
                            <td class="jq_idtContentEdit"></td>
                            <td class="jq_idtContentEdit"></td>
                            <td class="jq_idtContentEdit"></td>
                        </tr>

Expanded table

            <table id="ctl00_ContentPlaceHolder1_tabContainer_tabDetails_idtDiscipline_tblEdit">

            <tbody>
                <tr class="jq_idtHeaderRow"></tr>
                <tr class="jq_idtListRow"></tr>
                <tr class="jq_idtHeaderRow"></tr>
                <td class="jq_idtHeaderEdit" colspan="6">

                    <input id="ctl00_ContentPlaceHolder1_tabContainer_tabDetails_idtDiscipline_ctl24" type="checkbox" value="160" checked="checked" name="ctl00$ContentPlaceHolder1$tabContainer$tabDetails$idtDiscipline$ctl24"></input>
                    <label for="ctl00_ContentPlaceHolder1_tabContainer_tabDetails_idtDiscipline_ctl24"></label>

                </td>
                <tr class="jq_idtListRow">
                    <td class="jq_idtContentEdit" valign="top" colspan="6">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="jq_idtContentEdit">
                                        <div class="jq_border_label_container">
                                            <div class="border_label_box">
                                                <span class="jq_border_label" style="background-color: whitesmoke; color: rgb(0, 0, 0);"
                                                    <input id="ctl00_ContentPlaceHolder1_tabContainer_tabDetails_idtDiscipline_ctl32" name="ctl00$ContentPlaceHolder1$tabContainer$tabDetails$idtDiscipline$ctl32" checked="checked" value="197" type="checkbox">

Fiddle

https://jsfiddle.net/m1Lmg616/6/

I want Header-2 to be unticked when all his child checkboxes are unticked.

I have tried this in 'onchange' event of child checkbox but no luck so far;

var jqo = $(this);
if ($(jqo).closest('.jq_border_label').find('input[type=checkbox]').prop('checked').length > 0) {
        alert('at least one ticked');
    }

Answer 1

$('.chkChildHeader').on('change', function () {
        var checkedNum = $('.jq_border_label > input[type="checkbox"]:checked').length;
        if (checkedNum > 0) {
            $(this).closest('.jq_idtHeaderEdit').find('.chkBoxHeader').prop('checked', true);
        } else {
            $(this).closest('.jq_idtHeaderEdit').find('.chkBoxHeader').prop('checked', false);
        }
    });

I have prepared the following sample demo and below is the js fiddle link: https://jsfiddle.net/shrawanlakhe/41v9s4vv/15/

I think you can use this as reference to solve your problem since you didn't provide fiddle to your problem..

Fiddle shows that even if only one checkbox is checked,header checkbox is checkbox and if none of the child checkboxes are checked ,header checkbox is unticked.

If you want to checkbox only if all the child checkboxes are checked, then below is the code you can use

$('.chkChildHeader').on('change', function () {
        var length = $('.jq_border_label > input[type="checkbox"]').length;
        var checkedNum = $('.jq_border_label > input[type="checkbox"]:checked').length;

        if (length === checkedNum) {
            $(this).closest('.jq_idtHeaderEdit').find('.chkBoxHeader').prop('checked', true);
        }
        if (!checkedNum) {
            $(this).closest('.jq_idtHeaderEdit').find('.chkBoxHeader').prop('checked', false);
        }
    });

and below is the fiddle link: https://jsfiddle.net/shrawanlakhe/1ecqs3bu/1/