时间戳

首页 > 解决方案 > 选择其他收音机时显示/隐藏文本区域 - 未触发 jQuery 事件

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

问题描述

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

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()我认为不需要。

标签： javascriptjqueryevent-handlingjquery-events

解决方案

你的代码有一些小错误，比较一下：

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>

推荐阅读