时间戳

首页 > 解决方案 > 选中复选框时添加文本框

javascript - 选中复选框时添加文本框

问题描述

我有两个复选框（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>

形式的.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()

视图.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})

网址.py

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

标签： javascriptjquery

解决方案

$('.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>

推荐阅读