jQuery traverse down multiple layers deep to set checked value

Question

How do I use jQuery to traverse to this element deep in my table?

#adminreview > thead > tr > th:nth-child(1) > div > div > div.checkbox-container > div:nth-child(1) > input

and set the input's checked property to false?

I'm using this nice filter/sort jQuery plug in (Excel-like Bootstrap Table Sorting And Filtering Plugin) on my table. On load, I'm trying to only have one of the options checked, Pending, and will run the jQuery to hide the Approved & Denied rows separately.

On load, all statuses are currently checked by default:

Goal is to only have Pending checked on load:

Here is my table html. I know this has to do with traversing the DOM and setting the checked value for Select All, Approved, & Denied to false, but I'm not having much luck.

I assume I'd have to edit div:nth-child(1) (2) & (3) and use .prop('checked', false); Just not sure how to go that deep using jquery.

HTML (I didn't include the entire table on purpose):

<table id="adminreview" class="fbody">
  <thead>
    <tr>
      <th class="apply-filter no-search">Status
      <div class="dropdown-filter-dropdown">
        <div class="dropdown-filter-content" style="display: none;">
          <div class="dropdown-filter-sort">
            <span class="a-to-z" data-column="0" data-index="0">A to Z</span>
          </div>
          <div class="dropdown-filter-sort">
            <span class="z-to-a" data-column="0" data-index="0">Z to A</span>
          </div>
          <div class="checkbox-container">
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all"
            data-column="0" data-index="0" /> Select All</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Approved" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
            data-index="0" /> Approved</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Denied" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
            data-index="0" /> Denied</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Pending" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
            data-index="0" /> Pending</div>
          </div>
        </div>
      </div></th>          
      <th class="apply-filter">Company
      <div class="dropdown-filter-dropdown">
        <div class="dropdown-filter-content" style="display: none;">
          <div class="dropdown-filter-sort">
            <span class="a-to-z" data-column="1" data-index="1">A to Z</span>
          </div>
          <div class="dropdown-filter-sort">
            <span class="z-to-a" data-column="1" data-index="1">Z to A</span>
          </div>
          <div class="dropdown-filter-search">
            <input type="text" class="dropdown-filter-menu-search form-control" data-column="1" data-index="1"
            placeholder="Search" />
          </div>
          <div class="checkbox-container">
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all"
            data-column="1" data-index="1" /> Select All</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="ACME Construction Company" checked="checked" class="dropdown-filter-menu-item item"
            data-column="1" data-index="1" /> ACME Construction Company</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Joe&#39;s Concrete" checked="checked" class="dropdown-filter-menu-item item"
            data-column="1" data-index="1" /> Joe&#39;s Concrete</div>
          </div>
        </div>
      </div></th>

There are other columns with the same class that I don't want to touch:

Thanks in advance!

Ok. I'll format the html and get it up asap (since it's created on the fly I don't have the source readily available). — michaelf, May 06 '18 at 03:17

score 0 · Answer 1 · answered May 06 '18 at 03:23

0

You've item class on every checkbox. So what you can is loop through all the nodes and set checked to false for all. And then. Set checked to true for the last one.

Like

$('.item').each(function() {
  $( this ).prop('checked', false);
});
$('.item').last().prop('checked', true);

answered May 06 '18 at 03:23

Muhammad Usman

10,039
22
39

I'm not sure that will work as there are other columns for Company name, Date, etc that also have checked values with item class that I don't want to touch. Won't this uncheck all check boxes? I think I have to reference the data column and then the specific child somehow. I'll add another screenshot showing more of the table GUI. – michaelf May 06 '18 at 03:37

jQuery traverse down multiple layers deep to set checked value

1 Answers1