如何从django表单库中隐藏复选框，并使用Javascript切换其显示属性

How to hide a checkbox from django forms library and toggle its display attribute with Javascript

本文关键字：Javascript 属性 显示 django 表单 复选框 隐藏      更新时间：2023-09-26

我一直在用html制作一个带有复选框的表单，如果选中，它将使用Javascript显示另一个复选框。我现在已经将该表单更改为使用django的form库，但我不知道如何访问django输入字段的display属性。我已经尝试过HideInput小部件，但所有这些都没有隐藏标签，只是盒子本身。

关于如何设置django Form对象的显示属性和/或如何使用Javascript切换这些属性的任何帮助都将非常棒，以及/或如何在django Forms上编写事件属性的代码也将非常棒！

models.py:

class ContactForm(forms.Form):
Contact = forms.BooleanField(required=False, widget=CheckboxInput())
More = forms.BooleanField(required=False, widget=CheckboxInput())

html页面：

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 <script type="text/javascript"> 


$(function(){
$('#id_Contact').click(function(){
 if($('#id_Contact').is(':checked')){
    $('#id_More').show();
 }
  });
});
    function ifChecked(id, id2){
        var ele = document.getElementById(id);
        var ele2 = document.getElementById(id2);
        if(ele.checked){
            ele2.style.display = "block";
        }
        else{
            ele2.style.display = "none";
        }
    }
</script>
<form action="/contact/" method="post">
{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }}: {{ field }}
    </div>
{% endfor %}
<p><input type="submit" value="Send message" /></p>
</form>

您可以这样做。

from django.forms import CheckboxInput, HiddenInput
class ContactForm(forms.Form):
  Contact = forms.BooleanField(required=False, widget=CheckboxInput())
  More = forms.BooleanField(required=False, widget=HiddenInput())

你可以使用jQuery

$(function(){
  $('#id_Contact').click(function(){
     if($('#id_Contact').is(':checked')){$('#id_More').show();}
  });
});

u可以尝试

｛｛form.field_name_to_hided.as_hidden｝｝

在模板中

相关文章：