На одном буржуйском форуме попался вопрос о том, как организовать фильтрацию рядов таблицы на основе выбора одного, нескольких или всех чекбоксов. В каждом ряду таблицы имеется ячейка с названием страны, а у чекбоксов, за исключением чекбокса
All, атрибут value тоже содержит названия стран, что и является критерием фильтрации. Я решил добавить ещё логичность в поведение чекбокса
All: он может выбирать все остальные чекбоксы, при снятии галки с любой страны чекбокс
All тоже теряет галку, а также, при последовательном выборе всех других чекбоксов, он автоматически самовыбирается, если выбраны все страны. Разметка взята у автора вопроса, все эти классы и прочая херня не имеют значения.
- Код: Выделить всё
<!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>