млинець, оце завжди так буває. Сяду писати якийсь нубський шматок коду, аби показати новачку, а потім починається непотрібне гарцювання зі стилями... Що тут поробиш, все ж таки, я - творець.
html ваш
js
const checkbox = document.getElementById('filter1');
let elems = [];
checkbox.addEventListener('click', ({ target: { checked } }) => {
if (checked) {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => displayInfo(json));
} else {
if (elems.length > 0) {
for (const elem of elems)
elem.remove();
}
}
}, false);
const displayInfo = info => {
const elem = document.createElement('div');
elem.classList.add('info');
elem.innerText = info.title;
document.body.append(elem);
elems.push(elem);
}
непотрібний css
.info {
width: 50%;
padding: 7px 0;
margin: 30px auto;
border-radius: 10px;
background: lightpink;
font: bold 15px Helvetica, Verdana, sans-serif;
text-align: center;
text-transform: uppercase;
color: blue;
text-shadow: 0 0 10px rgba(255, 255, 255, 1);
letter-spacing: 1px;
}
екзампля https://jsfiddle.net/jqvk4wgt/22/
але якщо це фільтр, то при чеканні якогось бокса я б додавав якесь значення в масив з фільтрами, наприклад. А потім вже робив би запит, будуючи посилання з усіх фільтрів, що в масиві.
Типу, ви накляцали - apple, samsung, lenovo, і у вас є відповідний масив
['apple', 'samsung', 'lenovo']
і будуєте з нього посилання
'vsepo20.com.ua/products?apple=true&samsung=true&lenovo=true'
ну а при анчеканні чекбоксів видаляєте фільтри з масиву і знову робите запит, наприклад.
