Filter table rows based on multiple checkboxes value

Joined
Jan 13, 2023
Messages
1
Reaction score
0
Hi so i have a list of checkboxes of different countries. And i want to filter the rows based on the countries selected. My code filters rows correctly if there is one checkbox selected at one time but if i select multiple checkboxes it doesn't work. I want it to work in case if i select checkboxes of China, USA than it should show all rows containing china and USA as a country.

Where locations is an array containing countries values from selected checkboxes. I want to search it on multiple countries.
```
$("#websiteTable tr").filter(function() {
$(this).toggle($(this).text().indexOf(locations)> -1);
});
```

Here is my HTML table code
```
<table class="table table-striped border table-row-bordered table-row-gray-1000 border gy-7 gs-7">
<thead style="background-color: #366687;">
<tr class="fw-semibold fs-6 text-white border-bottom border-gray-200">
<th>Logo</th>
<th>Media Name</th>
<th>Language</th>
<th>Location</th>
<th>Media Type</th>
<th>Industry</th>
<th>Potential Audience</th>
<th>Screenshot</th>
</tr>
</thead>
<tbody id="websiteTable">
@foreach($websites as $website)
<tr>
<td><img alt="Logo" src="assets/media/logos/merilogo.png" class="h-30px h-lg-35px" style="width: 90%" /></td>
<td>{{$website->name}} <span style="display:block"><a href="{{$website->news_url}}" target="_blank">View Link</a></span></td>
<td>{{$website->language}}</td>
<td id="table-location">{{$website->country}}</td>
<td>{{$website->type->name}}</td>
<td>{{$website->category->name}}</td>
<td>{{$website->potential_audience}}</td>
<td><i class="fa fa-camera" style="
font-size: 19px;
color: #366687;
padding-left: 27PX;
"></i></td>
</tr>
@endforeach
<tr>
<td><img alt="Logo" src="assets/media/logos/merilogo.png" class="h-30px h-lg-35px" style="width: 90%" /></td>
<td>{{$website->name}} <span style="display:block"><a href="{{$website->news_url}}" target="_blank">View Link</a></span></td>
<td>{{$website->language}}</td>
<td id="table-location">China</td>
<td>{{$website->type->name}}</td>
<td>{{$website->category->name}}</td>
<td>{{$website->potential_audience}}</td>
<td><i class="fa fa-camera" style="
font-size: 19px;
color: #366687;
padding-left: 27PX;
"></i></td>
</tr>
</tbody>
</table>
```

And here is checkbox code. You can imagine that Checkboxes will have values like USA, China, Japan etc. I want to filter table that if user has selected only USA than only locations containing USA only should appear. And current code works fine with single selection. The issues arises when i select multiple locations like USA, China etc. It should show locations from USA and China both. I am unable to figure this path

```
<div class="card-body">
<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<input class="form-check-input" type="checkbox" value="All" id="all_location"/>
<label class="form-check-label" for="location-0">
All
</label>
</div>
@foreach($countries as $country)
<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<input class="form-check-input" type="checkbox" name="location[]" value="{{$country}}" id="location-{{$loop->iteration}}"/>
<label class="form-check-label" for="location-{{$loop->iteration}}">
{{$country}}
</label>
</div>
@endforeach


</div>
```
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    .r{
    color: crimson;
    }
    </style>
  </head>
  <body>  
<table class="table table-striped border table-row-bordered table-row-gray-1000 border gy-7 gs-7">
<thead style="background-color: #366687;">
<tr class="fw-semibold fs-6 text-white border-bottom border-gray-200">
<th>Logo</th>
<th>Media Name</th>
<th>Language</th>
<th>Location</th>
<th>Media Type</th>
<th>Industry</th>
<th>Potential Audience</th>
<th>Screenshot</th>
</tr>
</thead>
<tbody id="websiteTable">
<tr>
<td>logo</td>
<td>ame <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>Japan</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
<tr>
<td>logo</td>
<td>name <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>USA</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
<tr>
<td>logo</td>
<td>name <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>China</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
</tbody>
</table>

<div class="card-body">

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" value="All" />All</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="China" />China</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="Japan" />Japan</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="USA" />USA</label>
</div>

</div>

<script>
const tab = document.querySelector('#websiteTable'),
      trs = [...tab.querySelectorAll('tr')],
      chbs = [...document.querySelectorAll('.form-check-input')];

chbs.forEach( x => {

x.addEventListener('click', function() {
const val = this.value;

if(val != 'All'){
const tr = trs.filter( x => x.textContent.indexOf(val) != -1 )[0];
this.checked ? tr.classList.add('r') : tr.classList.remove('r');
}

else{
chbs.forEach( c => c.checked != this.checked ? c.click() : null );
}
});

});
</script>
 </body>
</html>
 
Last edited:
Joined
Jul 3, 2022
Messages
93
Reaction score
23
Improved version with the "All" checkbox behavior changed:

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    .r{
    color: crimson;
    background-color: lightsteelblue;
    }
    </style>
  </head>
  <body>   
<table class="table table-striped border table-row-bordered table-row-gray-1000 border gy-7 gs-7">
<thead style="background-color: #366687;">
<tr class="fw-semibold fs-6 text-white border-bottom border-gray-200">
<th>Logo</th>
<th>Media Name</th>
<th>Language</th>
<th>Location</th>
<th>Media Type</th>
<th>Industry</th>
<th>Potential Audience</th>
<th>Screenshot</th>
</tr>
</thead>
<tbody id="websiteTable">
<tr>
<td>logo</td>
<td>ame <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>Japan</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
<tr>
<td>logo</td>
<td>name <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>USA</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
<tr>
<td>logo</td>
<td>name <span style="display:block"><a href="{{$news_url}}" target="_blank">View Link</a></span></td>
<td>language</td>
<td>China</td>
<td>type->name</td>
<td>category->name</td>
<td>potential_audience</td>
<td><i class="fa fa-camera" style="font-size: 19px;color: #366687;padding-left: 27px;"></i></td>
</tr>
</tbody>
</table>

<div class="card-body">

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" value="All" />All</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="China" />China</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="Japan" />Japan</label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm py-1">
<label class="form-check-label"><input class="form-check-input" type="checkbox" name="location[]" value="USA" />USA</label>
</div>

</div>

<script>
const tab = document.querySelector('#websiteTable'),
      trs = [...tab.querySelectorAll('tr')],
      chbs = [...document.querySelectorAll('.form-check-input')];

chbs.forEach( x => {

x.addEventListener('click', function(){
const val = this.value,
      chkd = document.querySelectorAll('[type="checkbox"]:checked');

if(val != 'All'){
const tr = trs.filter( x => x.querySelector('td:nth-child(4)').textContent == val )[0];
this.checked ?
[tr.classList.add('r'), chkd.length == chbs.length - 1 ? chbs[0].checked = 1 : null ] :
[tr.classList.remove('r'), chbs[0].checked = 0];
}

else{
chbs.forEach( c => c.checked != this.checked ? c.click() : null );
}

});

});
</script>
 </body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,763
Messages
2,569,560
Members
45,035
Latest member
HoTaKeDai

Latest Threads

Top