当其他无线电选择显示/隐藏textarea的 - jQuery的事件不被解雇

2024-05-21 • 问答

如果未选择textarea选项，我试图隐藏other。我没有收到任何错误，所以我猜语法是正确的，但是我猜事件监听器是不正确的。我也尝试过使用focus()来代替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()也不是必需的。

您的代码有一些小错误，请对此进行比较：

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>

在您的JavaScript中，只需这样做，即可解决您的问题

var $selectAll = $( "input:radio[name=when]" );
$selectAll.on( "change",function() {
if($("input[name='when']:checked").val() != "other")
{ 
  $("#when_other").hide();
}
else{
 $("#when_other").show();
  }
}

然后在您的html中，将id添加到您的文本区域中

<textarea id="when_other" name="when_other"></textarea>

您可以通过在jQuery中使用this来实现。

$(document).ready(() => {
  $('input[name ="when"]').click(function() {
    $("textarea").show();

    if ($(this).val() == "other")
      $("textarea").show();
    else
      $("textarea").hide();
  })
});

<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" id="show_other" name="when" value="other" />
  <br />
  <textarea name="when_other"></textarea>
</div>

切换如何？

$(":input[name='when']").on("change",function () {
  $("textarea[name='when_other']").toggle(this.value === 'other' && this.checked);
//alert('click');
}).change();

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>

当其他无线电选择显示/隐藏textarea的 - jQuery的事件不被解雇

hzhgch 回答：当其他无线电选择显示/隐藏textarea的 - jQuery的事件不被解雇

大家都在问