Javascript 根据子元素的值更改父元素的CSS

我试图用class

.form group

更改第二个div的可见性。使用jQuery，我试图获取所选选项的值，然后根据该值更改前面提到的可见性

如果该值为0，则第二个

div.form组应可见。我在这方面遇到了困难，我尝试了
parents（）
和
closest（）
，但是，我相信我没有正确地实现这些

HTML

CSS

在函数中，将此
（'useQuestion[1]'）
替换为
（'useQuestions'u 1'）

我刚刚在这里修改了你的代码


$（文档）.ready（函数（）{
$（'#userQuestions_1'）。on（'change'，function（）{
如果（$（this.val（）='0'）{
$（'.formgroup:nth类型（2'）.addClass（'visible'）；
}
});
});
。表单组：第n个类型（2）{
可见性：隐藏；
}
.可见{
可见性：可见！重要；
}

你有什么饮食要求吗*
请选择
对
不
会后你想留下来喝一杯吗？
请选择
对
不
您的jquery选择器错误。该选择的id是
#userQuestions_1
，因此使用
$（'#userQuestions_1'）。on（'change'，function（）{}）jQuery选择器中有一个输入错误
$（“#useQuestion[1]”）
应该是
$（“#userQuestion[1]”）
刚刚试一试，效果很好，非常感谢！
<div class="form-group">
    <label class="control-label required" for="userQuestions[1]">Do you have any dietary requirements? <span class="required">*</span></label><select class="form-control user-success" id="userQuestions_1" name="userQuestions[1]" required="required">
        <option value="">
            Please select
        </option>
        <option value="0">
            Yes
        </option>
        <option value="1">
            No
        </option>
    </select>
</div>

<div class="form-group">
    <label class="control-label" for="userQuestions[2]">Would you like to stay for after conference drinks?</label><select class="form-control" id="userQuestions_2" name="userQuestions[2]">
        <option value="">
            Please select
        </option>
        <option value="0">
            Yes
        </option>
        <option value="1">
            No
        </option>
    </select>
</div>

$(document).ready(function(){
    $('#useQuestion[1]').change(function(){
    if($(this).val() == '0'){ 
        $('.form-group:nth-of-type(2)').addClass('visible');
    }
    });
});

.form-group:nth-of-type(2) {
    visibility: hidden;
}
.visible {
    visibility: visible !important;
}