【问题标题】:JS If Statements and Radio ButtonsJS If 语句和单选按钮
【发布时间】:2013-10-09 03:27:59
【问题描述】:

我有一个非常简单的表格,我希望用户能够回答每个问题,如果答案有一个子问题,子问题将在检查适当的答案时显示..我是未能让这个工作......

   <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>

如果答案是肯定的,我要做的就是显示“子问题”。如果可能的话,我宁愿不明确地引用输入元素,而是引用表单元素,以防万一“否”有子问题。我想让它尽可能动态。感谢您的帮助!

【问题讨论】:

  • var yes = document.getElementById("#Q4A1"); 应该是var yes = document.getElementById("Q4A1");
  • 我认为你最好只使用一个表单来包含所有问题,fieldsets 包含问题,嵌套fieldsets 包含子问题。
  • 我不太清楚你所说的“不明确引用输入元素”是什么意思,但这是我所做的jsfiddle.net/ST4C5/1
  • 对不起这个jsfiddle.net/ST4C5/2
  • @user2786485 如果它对你来说足够好,你能接受吗?

标签: javascript if-statement radio-button


【解决方案1】:

这是一个有效的jsfiddle

您需要收听按钮收音机上的更改事件。

$(document).ready(function(){

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

当然,您可能需要对其进行修改以满足您的需要,但您明白了。 您可以只使用 javascript 来监听单选按钮上的更改事件,并在需要时向您显示子问题。

如果你想用“否”的答案做同样的事情,很容易扩展它,但我让你这样做,这就是编程很有趣的原因。

【讨论】:

    猜你喜欢
    • 2013-07-21
    • 1970-01-01
    • 2012-11-21
    • 2016-08-04
    • 2014-05-31
    • 2013-08-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多