javascript - 选择其他 radio 时显示/隐藏文本区域 - jQuery 事件未触发

Question

如果未选择other 选项，我会尝试隐藏textarea。我没有收到任何错误，所以我猜语法是正确的，但我猜事件监听器是不正确的。我也尝试过使用 focus() 代替 click()，因为我认为 input 可能不会注册为 单击。但这些都没有奏效。

HTML:

<div>
    <input type="radio" name="when" value="time" />
    <br />
    <input type="radio" name="when" value="count" />
    <br />
    Other:
    <input type="radio" name="when" value="other" />
    <br />
    <textarea name="when_other"></textarea>
</div>

Javascript:

<script type="text/javascript">
    $("input[name='when']").click(function() {
        if($("input[name='when']").value == 'other'){
            $("text[name='when_other']").attr('display', 'block');
        } else {
            $("text[name='when_other']").attr('display', 'none');
            $("text[name='when_other']").html('');
        }
    });
</script>

上面也是标记出现的顺序，HTML在前，JS在后。页面上也没有动态内容，因此我认为不需要 live()/on() 。

Answer 1

你的代码有一些小错误，比较一下这个:

textarea {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="radio" name="when" value="time" />
<br />
<input type="radio" name="when" value="count" />
<br />
Other:
<input type="radio" name="when" value="other" />
<br />
<textarea name="when_other"></textarea>
</div>
<script type="text/javascript">
$("body").on("click","input[name='when']",function() {
    if($("input[name='when']:checked").val()== 'other'){
        $("textarea[name='when_other']").css('display', 'block');
    } else {
        $("textarea[name='when_other']").css('display', 'none');
        $("textarea[name='when_other']").val('');
    }
});
</script>