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