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

San*_*ago 5 javascript django django-models django-forms dom-events

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

任何有关如何设置 django Form 对象的显示属性和/或如何使用 Javascript 切换这些属性的帮助都会很棒,和/或如何在 django Forms 上编写事件属性代码也会很棒!

模型.py:

class ContactForm(forms.Form):
Contact = forms.BooleanField(required=False, widget=CheckboxInput())
More = forms.BooleanField(required=False, widget=CheckboxInput())
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

kar*_*ikr 1

你可以这样做。

from django.forms import CheckboxInput, HiddenInput

class ContactForm(forms.Form):
  Contact = forms.BooleanField(required=False, widget=CheckboxInput())
  More = forms.BooleanField(required=False, widget=HiddenInput())
Run Code Online (Sandbox Code Playgroud)

你可以使用 jQuery

$(function(){
  $('#id_Contact').click(function(){
     if($('#id_Contact').is(':checked')){$('#id_More').show();}
  });
});
Run Code Online (Sandbox Code Playgroud)