Question

尝试构建一种基于复选框管理隐藏和显示某些字段的通用方法。在我的项目中，通常某些表单可能包含一个检查字段，如果选中该复选框，它将与其他字段关联，它们将根据复选框显示或隐藏。

我是javascripting的新手，我希望有人能帮助我在这里保持正确的道路。在我的django表单中，我使用data属性来指示复选框和数据字段的标志，以指示将实现的字段如下：

class PackageForm(forms.ModelForm):
    '''
    PackageForm
    '''
    class Meta:
        model = Package
        widgets = {
            'recurring_flag'      : CheckboxInput(attrs={'data-collapse-flag' : 'True'}),
            'recurring_type'      : Select(attrs={'data-collapse-id' : 'recurring_flag'}),
            'recurring_period'    : TextInput(attrs={'data-collapse-id' : 'recurring_flag'}),

        }

当然，对于我在jquery中的有限知识，我能够静态地编写如下

$(document).ready(function() {


    $('input[data-collapse-flag]').click(function() {
       if ($(this).is(':checked')) {
           $("label[for='id_recurring_type']").show();
           $('#id_recurring_type').show();
           $("label[for='id_recurring_period']").show();
           $('#id_recurring_period').show();
       }else{
           $('#id_recurring_type').hide();
           $("label[for='id_recurring_type']").hide();
           $('#id_recurring_period').hide();
           $("label[for='id_recurring_period']").hide();
       }
    });

}）;

但是，我真的想创建一个单独的javascript文件来读取data-collapse-flag并构建一个操作来遍历任何带有data-collapge-id的字段以应用该操作。因此，无论何时需要此方案，我都可以在所有表单中使用该脚本。

如果有人可以告诉我如何构建这样的东西或指向我的方法，我们非常感激。

问候，

Answer 1

正如一些概念支持：你想要的是循环遍历给定元素的后代并基于开关添加行为，对吗？

你想尝试类似的东西：

在适当的位置添加类名：'collapse-stack'，'collapse-label'，'collapse-list'（标签＆amp; list甚至可能只是'可折叠'）。
让jQuery循环遍历这些通用项。

像：

  $(document).ready(function() {
       $('.collapse-stack').each(function(){
            //this = current collapse stack
            $(this).click(function() {
                if ( $(this).is(':checked') ) {
                    $(".collapse-label, .collapse-list").each(function(){
                        //this = current collapse-label
                        $(this).show();
                    });
                }else{
                    $(".collapse-label, .collapse-list").each(function(){
                        //this = current collapse-label
                        $(this).hide();
                    });
                }
            });
        })
    });

或某些人。玩弄“每个”功能。

通过django表单以编程方式使用jquery隐藏/显示字段

1 个答案: