时间戳

首页 > 解决方案 > 如何在按钮单击时切换输入值

javascript - 如何在按钮单击时切换输入值

问题描述

我有一个button和一个input领域。当我单击按钮时，我希望输入字段填充一些文本。当再次单击按钮时，我希望填充的文本消失或变为Null.

当我在线查看时，我只能找到从列表中的元素切换类的链接。

我如何做到这一点jQuery？

到目前为止，这是我的代码。我能够用所需的值填充输入字段。但是当我再次单击该按钮时，我无法删除该值。

<button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">
    Click Me
</button>
<input type="text" name="test-input" id="test-input" value="">


<script type="text/javascript">
  $('#test-button').click(function()
    {
      $('#test-input').val("Value Populated");
    }
  )
</script>

标签： javascripthtmljquery

解决方案

像这样？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">
    Click Me
</button>
<input type="text" name="test-input" id="test-input" value="">


<script type="text/javascript">
  $('#test-button').click(function()
    {
      const $testInput = $('#test-input');
      if (!$('#test-input').val().length) {
        $('#test-input').val("Value Populated");
      } else {
        $('#test-input').val("");
      }
      
    }
  )
</script>

推荐阅读