Для реализации функционала, который позволяет загружать записи в зависимости от выбранных значений чекбоксов, вы можете следовать следующему общему алгоритму:
1. **Создание интерфейса с чекбоксами**: На стороне клиента создайте чекбоксы для разных диапазонов значений. Например, это могут быть размеры, цены и т.д.
```html
<form id="filterForm">
<label>
<input type="checkbox" name="size" value="20-25"> 20-25
</label>
<label>
<input type="checkbox" name="size" value="35-45"> 35-45
</label>
<!-- Здесь могут быть другие чекбоксы -->
<button type="submit">Применить фильтр</button>
</form>
<div id="results"></div>
```
2. **Обработка события нажатия на кнопку**: Используйте JavaScript для обработки кликов по чекбоксам и отправки данных на сервер.
```javascript
document.getElementById('filterForm').addEventListener('submit', function(event) {
event.preventDefault();
const selectedRanges = Array.from(document.querySelectorAll('input[name="size"]:checked')).map(checkbox => checkbox.value);
fetch('your-api-endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ selectedRanges })
})
.then(response => response.json())
.then(data => {
// Обработка полученных данных и отображение результатов
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = ''; // Очистка предыдущих результатов
data.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.textContent = item.name; // Предположим, что у вас есть поле "name" в ответе
resultsDiv.appendChild(itemDiv);
});
})
.catch(error => console.error('Error:', error));
});
```
3. **Создание серверного API для обработки запроса**: На стороне сервера создайте конечную точку API, которая будет обрабатывать запрос и извлекать соответствующие записи из базы данных.
Пример на Node.js с использованием Express и базы данных (например, MongoDB или MySQL):
```javascript
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.post('/your-api-endpoint', async (req, res) => {
const { selectedRanges } = req.body;
try {
const results = await fetchDataFromDatabase(selectedRanges); // Здесь должен быть ваш запрос к БД
res.json(results);
} catch (error) {
res.status(500).send("Error fetching data");
}
});
async function fetchDataFromDatabase(selectedRanges) {
// Преобразование диапазонов в SQL или другой запрос к БД
let query = 'SELECT * FROM products WHERE ';
const conditions = selectedRanges.map(range => {
const [min, max] = range.split('-').map(Number);
return `(size BETWEEN ${min} AND ${max})`;
});
query += conditions.join(' OR ');
// Выполните запрос к вашей базе данных и верните результаты
// Например: return await db.query(query);
}
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
Этот пример демонстрирует основу реализации, и его можно адаптировать под ваши особенности и технологии. Не забудьте добавить необходимую валидацию, обработку ошибок и другие важные аспекты для полноценного приложения.