JQUERY根据单选按钮显示隐藏字段集

我想使用JQUERY以这种方式显示和隐藏表单中的一些字段集：

伪代码：

- if user-type == Company: show("company-fieldset")

- if user-type == Individual:
         - if individual-type == Freelancer: show("freelancer-fieldset")
         - if individual-type == Professor: show("professor-fieldset")
         - if individual-type == Student: show("student-fieldset")

我是使用JQUERY的新手，但我需要一种快速的方法来完成这件事，如果您能帮助我，我将不胜感激。请考虑到： 我必须使用单选按钮，因为它们是互斥的。 每次我选择单选按钮时，表单必须实时更新。 谢谢

HTML

---

这里不需要jQuery，只需对HTML进行一点重新格式化，并添加少量CSS

• 我为您的收音机添加了一个名称，以便它们按类型分组
• 我把现场设备放在控制它们的收音机后面

fieldset:不是（.main fieldset）{
显示：无；
}
输入[类型=无线电]：选中+br+字段集{
显示：块；
}

单位


公司展示了

个人


个人秀

自由职业者


自由职业者秀

教授


教授展示

学生


学生秀

提交

实际上，我的HTML如下所示：

<form method="POST">

        <fieldset class="main-fieldset">
            {{ form.email.label }} {{ form.email() }}
            {{ form.password.label }} {{ form.password() }}
            {{ form.phone.label }} {{ form.phone() }}
            {{ form.location.label }} {{ form.location() }}
            {{ form.user_type.label }} {{ form.user_type(id='user-type') }}
        </fieldset>

        <fieldset class="company-fieldset">
            {{ form.company_name.label }} {{ form.company_name() }}
        </fieldset>

        <fieldset class="individual-fieldset">
            {{ form.name.label }} {{ form.name() }}
            {{ form.surname.label }} {{ form.surname() }}
            {{ form.birth.label }} {{ form.birth() }}
            {{ form.skills.label }} {{ form.skills() }}
            {{ form.individual_type.label }} {{ form.individual_type(id='individual-type') }}

            <fieldset class="freelancer-fieldset">
                {{ form.studio.label }} {{ form.studio() }}
            </fieldset>

            <fieldset class="professor-fieldset">
                {{ form.department.label }} {{ form.department() }}
            </fieldset>

            <fieldset class="student-fieldset">
                {{ form.school.label }} {{ form.school() }}
            </fieldset>
        </fieldset>

        <fieldset class="main-fieldset">
            {{ form.submit() }}
        </fieldset>
</form>

$(document).ready(function() {

    $("#user_type, #individual_type").change(function() {

        var user_type = $('#user_type').attr("value");

        if (user_type == "company") {
            $('.company-fieldset').show();
            $('.individual-fieldset').hide();
        }

        if (user_type == "individual") {

            $('.company-fieldset').hide();

            var individual_type = $('#individual_type').attr("value");

            if (individual_type == "freelancer") {
                $('.freelancer-fieldset').show();
                $('.professor-fieldset').hide();
                $('.student-fieldset').hide();
            }
            if (individual_type == "professor") {
                $('.freelancer-fieldset').hide();
                $('.professor-fieldset').show();
                $('.student-fieldset').hide();
            }
            if (individual_type == "student") {
                $('.freelancer-fieldset').hide();
                $('.professor-fieldset').hide();
                $('.student-fieldset').show();
            }
        }
    })
});

---

好的，我真的非常感谢你，Steve，但是我仍然想使用jquery，因为实际上我的单选按钮不是由我手动创建的，但是它们来自表单库，所以它们不能相互关联。看看：user_type=RadioField（'user type:'，validators=[Required（）]，choices=[（'company'，'company'），（'individual'，'individual'）]，default='company'），我对所讨论的库不熟悉，你是说你不能控制输出的HTML吗？单选按钮是否正确分组？如果您确实需要保留现有的HTML格式，我将很快添加另一个编辑。

<form method="POST">

        <fieldset class="main-fieldset">
            {{ form.email.label }} {{ form.email() }}
            {{ form.password.label }} {{ form.password() }}
            {{ form.phone.label }} {{ form.phone() }}
            {{ form.location.label }} {{ form.location() }}
            {{ form.user_type.label }} {{ form.user_type(id='user-type') }}
        </fieldset>

        <fieldset class="company-fieldset">
            {{ form.company_name.label }} {{ form.company_name() }}
        </fieldset>

        <fieldset class="individual-fieldset">
            {{ form.name.label }} {{ form.name() }}
            {{ form.surname.label }} {{ form.surname() }}
            {{ form.birth.label }} {{ form.birth() }}
            {{ form.skills.label }} {{ form.skills() }}
            {{ form.individual_type.label }} {{ form.individual_type(id='individual-type') }}

            <fieldset class="freelancer-fieldset">
                {{ form.studio.label }} {{ form.studio() }}
            </fieldset>

            <fieldset class="professor-fieldset">
                {{ form.department.label }} {{ form.department() }}
            </fieldset>

            <fieldset class="student-fieldset">
                {{ form.school.label }} {{ form.school() }}
            </fieldset>
        </fieldset>

        <fieldset class="main-fieldset">
            {{ form.submit() }}
        </fieldset>
</form>

$(document).ready(function() {

    $("#user_type, #individual_type").change(function() {

        var user_type = $('#user_type').attr("value");

        if (user_type == "company") {
            $('.company-fieldset').show();
            $('.individual-fieldset').hide();
        }

        if (user_type == "individual") {

            $('.company-fieldset').hide();

            var individual_type = $('#individual_type').attr("value");

            if (individual_type == "freelancer") {
                $('.freelancer-fieldset').show();
                $('.professor-fieldset').hide();
                $('.student-fieldset').hide();
            }
            if (individual_type == "professor") {
                $('.freelancer-fieldset').hide();
                $('.professor-fieldset').show();
                $('.student-fieldset').hide();
            }
            if (individual_type == "student") {
                $('.freelancer-fieldset').hide();
                $('.professor-fieldset').hide();
                $('.student-fieldset').show();
            }
        }
    })
});