Как создать набор чекбоксов с форматированием, аналогичным изображению?

Изображение к вопросу
  • 30 августа 2023 г. 2:46
Ответы на вопрос 1
Для создания набора чекбоксов с таким форматированием, вы можете использовать виджет MultipleChoiceWidget и CSS для стилизации.

Вот пример кода:

forms.py:
```python
from django import forms

class ServerForm(forms.Form):
    SERVER_CHOICES = (
        ('server1', 'Server 1'),
        ('server2', 'Server 2'),
        ('server3', 'Server 3'),
        # добавьте другие серверы здесь
    )

    servers = forms.MultipleChoiceField(
        choices=SERVER_CHOICES,
        widget=forms.CheckboxSelectMultiple(attrs={'class': 'custom-checkbox'})
    )
```

template.html:
```html
{% load static %}

<form method="post">
  {% csrf_token %}

  {% for form in formset %}
    {{ form.servers.label }}
    <div class="checkbox-container">
    {% for choice in form.servers %}
      <div class="checkbox-item">
        {{ choice.tag }}
        <label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
      </div>
    {% endfor %}
    </div>
  {% endfor %}

  <input type="submit" value="Submit">
</form>

<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
```

style.css:
```css
.custom-checkbox {
  display: none;
}

.checkbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.checkbox-item {
  display: flex;
  align-items: center;
}

.checkbox-item input[type="checkbox"] + label {
  padding-left: 20px;
  position: relative;
}

.checkbox-item input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  background-color: white;
}

.checkbox-item input[type="checkbox"]:checked + label:before {
  background-color: #007bff;
}

.checkbox-item input[type="checkbox"]:checked + label:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
```

Убедитесь, что установили правильные пути к статическим файлам и добавили ссылку на ваш файл стилей (style.css) в вашем шаблоне (template.html).

Также, не забудьте импортировать ServerForm в вашем представлении и передать его в контекст.
Похожие вопросы