JS If語句和單選按鈕

Question

我有一個非常簡單的表格，我希望用戶能夠回答每個問題，如果一個答案有一個子問題，那么當檢查了適當的答案后，該子問題就會顯示出來。這個工作...

   <script>
    $(document).ready(function(){

            $(".sub-question").hide();

            var yes = document.getElementById("#Q4A1");


            if(yes.checked){
                    $(".sub-question").show(200);
            }
    });
    </script>

目前，我的yes.checked條件收到“空”參考錯誤。

<div class="question-content">
<span>Example text example text</span>
<form id="question-04">
<label><input type="radio" name="question-04" value="yes"  id="Q4A1"> Yes</label><br>
<label><input type="radio" name="question-04" value="no"> No</label>
</form>
<div class="sub-question">
<div class="sub-question-content">
<span>Aliquam erat volutpat. Quisque facilisis non mauris non malesuada. Duis in accumsan metus. Ut eget nulla neque?</span>
<form id="subquestion-04">
<label><input type="radio" name="question-04" value="yes"> Yes</label><br>
<label><input type="radio" name="question-04" value="no"> No</label>
</form>
</div>

</div>
</div>

我只想顯示“子問題”（如果答案是肯定的）。 如果可能的話，我寧願不明確地引用input元素，而是引用form元素，以防萬一“ no”有子問題。 我想讓它盡可能動態。 感謝您的幫助！

Answer 1

這是一個工作的jsfiddle

您需要在單選按鈕上收聽更改事件。

$(document).ready(function(){

        $(".sub-question").hide();
        $("#Q4A1").change(function () {
             $(".sub-question").show(200);
        });
});

當然，您可能必須對其進行修改以適合您的需要，但是您明白了。 您可以只使用javascript偵聽單選按鈕上的change事件，並在需要時向您顯示子問題。

如果您想對“ no”答案做同樣的事情，很容易擴展它，但是我允許您這樣做，這就是為什么編程很有趣的原因。