CODEWITHSUNDEEP
jquery
nevil david
nevil david

Reputation: 9

jquery selecting input boxes in table 'td' until next 'th'

I have the following table created dynamically(so please don't mind the values and table structure)

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

When a checkbox inside a th is selected/deselected, I need to get all the checkboxes in the following tds selected/deselected , till the next th is reached. I tried the following code.

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

Its not working.

Upvotes: 1

Views: 117

Answers (4)

AamirR
AamirR

Reputation: 12218

You have to loop through the rows and keep checking if the next row has first-child TD, as such:

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

Upvotes: 0

Eddie
Eddie

Reputation: 26854

You can add group class or attribute to make it easier.

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

Upvotes: 1

Harun Diluka Heshan
Harun Diluka Heshan

Reputation: 1256

I did some changes to your jQuery code but i did't touch 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>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324810

Consider utilising better structure in your table.

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

Note that you may have as many tbody elements as you like.

Once this structure is in place, you can simply use .closest("tbody").find("td input[type=checkbox]") and... job done!

Upvotes: 2

Related Questions