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

Question

如何取消选中 jquery 中最近的 header 复选框。不同行中有多个标题，当所有子复选框均未选中时，需要取消选中标题中的复选框。

标题复选框位于“jq_idtHeaderEdit”类中，子复选框位于“jq_border_label”类中。

1- 在子复选框更改事件中，如何检查“jq_border_label”类中的所有子复选框是否都未选中？

2-如果所有子复选框都未选中，则取消选中最接近的类“jq_idtHeaderEdit”中的标题。

这就是表格的样子；

        <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>

扩展表格

            <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/

我希望当 Header-2 的所有子复选框均未选中时也未选中。

我已经在子复选框的“onchange”事件中尝试过此操作，但到目前为止没有运气；

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/

我认为你可以使用它作为引用来解决你的问题，因为你没有提供 fiddle 来解决你的问题..

Fiddle 显示，即使只选中一个复选框，标题复选框也是复选框，如果没有选中任何子复选框，则标题复选框未被选中。

如果您只想在选中所有子复选框时才进行复选框，那么下面是您可以使用的代码

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

下面是 fiddle 链接: https://jsfiddle.net/shrawanlakhe/1ecqs3bu/1/