Question

我有两个复选框（choice_0和choice_1）。我必须能够选择一个或两个，并且应该在其旁边添加文本框。我的问题是，如果启用其中一个复选框，它将在其下方添加一个文本框字段；如果我想单击其他复选框，则可能会将其添加，但它们处于相同位置，因此我仍然只能看到一个。当我禁用复选框时，该字段仍然存在，并且不会被删除。我将使用该文本字段将参数发送到Django并将其用于过滤器。

同时启用了两个复选框：

现在，当我禁用它们时：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    display:block;
}

input[type=checkbox] {
    display:block;
}


</style>

</head>
<body>
<form>
    <br><br>
    <input type="checkbox" class="myclass" value="year" name="year" placeholder="TEXT">Year</input>
    <input type="checkbox" class="myclass" value="name" name="name" placeholder="TEXT">Name</input>
    <input type="submit" value="Apply" />
</form>

    <script>
$('.myclass').click(function(){
  $(this).prop('checked') ? 
  $('form').append(`<input id="${$(this).val()}input"></input>`) :
  $(`form #${$(this).val()}input`).remove();
});
    </script>
</body>
</html>

formy.py

class ChoiceForm(forms.Form):
    filter = forms.MultipleChoiceField(choices=(('1', 'Something'), ('2', 'Something1')), widget=forms.CheckboxSelectMultiple(attrs={'id': 'choice'}))
    name = forms.TextInput()
    year = forms.TextInput()

views.py

def filtar(request):
    form = ChoiceForm(request.GET or None)
    data = Clanak.objects.all()    
    print(request.POST) # print QueryDict also
    if form.is_valid():
        print(form.cleaned_data) # This dict contains keys (filters, and html(This is dynamically added field))
        if '1' in form.cleaned_data['filter']:
            data = data.filter(naslov=form.cleaned_data['name'])
        if '2' in form.cleaned_data['filter']:
            data = data.filter(datumObjave__year=form.cleaned_data['year'])
    return render(request, 'filtar.html', {'data': data, 'form': form})

urls.py

urlpatterns = [
    path('filtar/',views.filtar, name='filtar'), 
] + static(settings.MEDIA_URL, document_root= settings.MEDIA_ROOT)

Answer 1

$('.myclass').click(function(){
  $(this).prop('checked') ? 
  $('form').append(`<input id="${$(this).val()}input" style="display:block;margin:5px" placeholder="${$(this).val()} details"></input>`) :
  $(`form #${$(this).val()}input`).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" class="myclass" value="option1">Option 1</input>
<input type="checkbox" class="myclass" value="option2">Option 2</input>
</form>

Answer 2

var counter = 0;
  $('#choice_0').click(function() {
      if (!counter) {
          $('<input>').attr({
              id: 'foo',
              name: 'text'
          }).appendTo('form');
        $('#foo')[0].style.display = 'block';
      } else {
        $('#foo')[0].style.display = 'none';
      counter++;
  })

重复另一个复选框。

选中复选框后添加文本框

2 个答案: