预先存在的Wordpress表单上的CSS条件字段

Question

我有一个需要一些条件字段的长会员表单。如果选中x，则显示字段y，依此类推。

我一直在尝试使用CSS，但到目前为止还没有成功。我不能真正破解任何东西。 html由Memberpress额外字段输出。我需要用CSS来处理它。

这是html。

<div class="mp-form-row mepr_custom_field mepr_mepr_have_you_taken_the_mccee_exam">
    <label for="mepr_have_you_taken_the_mccee_exam" class="mepr-checkbox-field mepr-form-input " >
        <input type="checkbox" name="mepr_have_you_taken_the_mccee_exam" id="mepr_have_you_taken_the_mccee_exam"  />
          I have taken the MCCEE exam        
    </label>
</div>

<div class="mp-form-row mepr_custom_field mepr_mepr_date_of_mccee_exam">
    <div class="mp-form-label">
        <label for="mepr_date_of_mccee_exam">Date of MCCEE exam:</label>
        <span class="cc-error">Date of MCCEE exam is not valid</span>
    </div>
    <input type="text" name="mepr_date_of_mccee_exam" id="mepr_date_of_mccee_exam" value="" class="mepr-date-picker mepr-form-input "  />
</div>

<div class="mp-form-row mepr_custom_field mepr_mepr_mccee_score">
    <div class="mp-form-label">
        <label for="mepr_mccee_score">MCCEE Score:</label>
        <span class="cc-error">MCCEE Score is not valid</span>
    </div>
    <input type="text" name="mepr_mccee_score" id="mepr_mccee_score" class="mepr-form-input " value=""  />
</div>

我想要发生的是：当有人点击“我已参加MCCEE考试”复选框时，我希望其他两个字段可见。

我认为问题在于元素在不同的DIV中。

这是我正在尝试的CSS。

.mepr_mepr_date_of_mccee_exam {
    display:none
}
.mepr_mepr_mccee_score {
    display:none
}
#mepr_have_you_taken_the_mccee_exam:checked ~ .mepr_mepr_date_of_mccee_exam,
#mepr_have_you_taken_the_mccee_exam:checked ~ .mepr_mepr_mccee_score {
    display:block
}

我尝试了几种不同的组合，但没有任何效果。任何帮助，将不胜感激。我已经好几天了。