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

Posted 2023-02-24

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

【英文标题】：How to hide a checkbox from django forms library and toggle its display attribute with Javascript

【发布时间】：2012-08-24 11:16:20

【问题描述】：

我一直在用 html 制作一个带有复选框的表单，如果选中它，它会使用 javascript 显示另一个复选框。我现在已经将该表单更改为使用 django 的表单库，但我不知道如何访问 django 输入字段的显示属性。我已经尝试过 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>

【参考方案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())

你可以使用 jQuery

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

【讨论】：

隐藏复选框但不隐藏名称“更多”是否有办法将其设为标签然后也将其隐藏？

寻找标签。它会生成为 for="id_content"，也可以使用 jquery 隐藏它。

我怎样才能让它开始隐藏呢？此外，标签本身没有单独的 ID，它只是引用复选框 ID。我将如何调用标签？ @karthikr

对不起，我应该意识到.. widget=forms.HiddenInput() 而不是 style 属性

More = forms.BooleanField(required=False, widget=forms.HiddenInput()) 这也只会隐藏盒子本身：/

【参考方案2】：

你可以试试

form.field_name_to_hide.as_hidden

在模板中