У меня есть table, созданный динамически (поэтому, пожалуйста, не обращайте внимания на значения и структуру таблицы)

         <table id="tbl">
            <tr>
                <th>
                    <input type="checkbox" name="1" value="1" />
                </th>
                <th>
                    Finance
                </th>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="1" value="1" />
                </td>
                <td>
                    section1
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="21" value="21" />
                </td>
                <td>
                    section2
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="16" value="16" />
                </td>
                <td>
                    section3
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="17" value="17" />
                </td>
                <td>
                    section4
                </td>
            </tr>
            <tr>
                <th id="th">
                    <input type="checkbox" name="12" value="12" />
                </th>
                <th>
                    Information Tech
                </th>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="3" value="3" />
                </td>
                <td>
                    section1
                </td>
            </tr>
          </table>

Когда флажок внутри th выбран / снят, мне нужно установить все флажки в следующих td выбранных / снятых флажках, пока не будет достигнут следующий th. Я попробовал следующий код.

$('#tbl tr th').find('input[type="checkbox"]').click(function () {
    var isChecked = $(this).prop("checked");

    $(this).nextuntil('#tbl tr th').each(function () {

        $('#tbl tr td').find('input[type="checkbox"]').prop('checked', isChecked);
    });
});

Это не работает.

1
nevil david 2 Мар 2018 в 11:21

4 ответа

Лучший ответ

Подумайте об использовании лучшей структуры в вашей таблице.

<table>
  <tbody>
    <tr><th>checkbox</th><th>heading 1</th></tr>
    <tr>...rows/cells...</tr>
  </tbody>
  <tbody>
    <tr><th>checkbox</th><th>heading 2</th></tr>
    <tr>...rows/cells...</tr>
  </tbody>
</table>

Обратите внимание, что у вас может быть столько элементов tbody, сколько вам нужно.

Как только эта структура будет создана, вы можете просто использовать .closest("tbody").find("td input[type=checkbox]") и ... задание выполнено!

2
Niet the Dark Absol 2 Мар 2018 в 09:27

Вы можете добавить групповой класс или атрибут, чтобы сделать это проще.

$(function() {
  //On init: Adding group attribute 
  var cbClassCount = 0;
  $("#tbl input[type='checkbox']").each(function() {
    if ($(this).parent().prop("tagName") === "TH") {
      cbClassCount++;
      $(this).attr("group", cbClassCount);
    } else {
      $(this).attr("group-parent", cbClassCount);
    }
  });


  //On TH checkbox click - Check or uncheck child checkboxes
  $("#tbl th>input[type='checkbox']").click(function() {
    $("input[group-parent='" + $(this).attr("group") + "']").prop('checked', $(this).prop("checked"));
  });


  //SUGGESTION: You can also add the code below (optional)
  //On TD checkbox click - Updated the parent checkbox if all of the child checkboxes are checked.
  $("#tbl td>input[type='checkbox']").click(function() {
    if ($("input[group-parent='" + $(this).attr("group-parent") + "']").length === $("input[group-parent='" + $(this).attr("group-parent") + "']:checked").length)
      $("input[group='" + $(this).attr("group-parent") + "']").prop('checked', true);
    else $("input[group='" + $(this).attr("group-parent") + "']").prop('checked', false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <th>
      <input type="checkbox" name="1" value="1" />
    </th>
    <th>
      Finance
    </th>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="1" value="1" />
    </td>
    <td>
      section1
    </td>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="21" value="21" />
    </td>
    <td>
      section2
    </td>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="16" value="16" />
    </td>
    <td>
      section3
    </td>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="17" value="17" />
    </td>
    <td>
      section4
    </td>
  </tr>
  <tr>
    <th id="th">
      <input type="checkbox" name="12" value="12" />
    </th>
    <th>
      Information Tech
    </th>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="3" value="3" />
    </td>
    <td>
      section1
    </td>
  </tr>
</table>
1
Eddie 2 Мар 2018 в 09:52

Я сделал некоторые изменения в вашем коде JQuery, но я не касался HTML.

$('#tbl tr th input[type="checkbox"]').click(function () {
    var isChecked = $(this).prop("checked");
    var pElem = $(this).parent().parent();
    var nStopElem = pElem.nextAll().each((indx, elem)=>{
        if ($(elem).find("th").length == 0) {
            $(elem).find("input[type='checkbox']").prop('checked', isChecked);
        }
        else
        {
            return false;
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
            <tr>
                <th>
                    <input type="checkbox" name="1" value="1" />
                </th>
                <th>
                    Finance
                </th>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="1" value="1" />
                </td>
                <td>
                    section1
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="21" value="21" />
                </td>
                <td>
                    section2
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="16" value="16" />
                </td>
                <td>
                    section3
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="17" value="17" />
                </td>
                <td>
                    section4
                </td>
            </tr>
            <tr>
                <th id="th">
                    <input type="checkbox" name="12" value="12" />
                </th>
                <th>
                    Information Tech
                </th>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="3" value="3" />
                </td>
                <td>
                    section1
                </td>
            </tr>
          </table>
0
Harun Diluka Heshan 2 Мар 2018 в 09:33

Вы должны циклически проходить по строкам и продолжать проверять, имеет ли следующая строка TD первого ребенка, как таковой:

(function($){
    $("#tbl").find('th>input[type="checkbox"]').click(function(){
        var $this = $(this),
            isChecked = $this.prop("checked"),
            row = $this.closest("tr").next();

        while (row.length && row.children(":first").prop("tagName").toUpperCase() == "TD") {
            var checkbox = row.find('td>input[type="checkbox"]');
            checkbox.prop("checked", isChecked);
            row = row.next();
        }
    })
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
    <tr>
        <th>
            <input type="checkbox" name="1" value="1" />
        </th>
        <th>
            Finance
        </th>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="1" value="1" />
        </td>
        <td>
            section1
        </td>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="21" value="21" />
        </td>
        <td>
            section2
        </td>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="16" value="16" />
        </td>
        <td>
            section3
        </td>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="17" value="17" />
        </td>
        <td>
            section4
        </td>
    </tr>
    <tr>
        <th id="th">
            <input type="checkbox" name="12" value="12" />
        </th>
        <th>
            Information Tech
        </th>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="3" value="3" />
        </td>
        <td>
            section1
        </td>
    </tr>
</table>
0
AamirR 2 Мар 2018 в 10:03