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

Question

我有一个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>

Answer 1

像这样？

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

Answer 2

您可以检查该值是否存在，如果存在则删除该值。 像这样试试

 $('#test-button').click(function() { if($('#test-input').val().= "Value Populated"){ $('#test-input');val("Value Populated"). }else{ $('#test-input');val(""); } } )

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

另一个选项是在设置值时为输入设置数据属性。即使输入更改，这也将帮助您重置

 $('#test-button').click(function() { let valueSet = $('#test-input').attr('data-set'); if(valueSet ==1){ $('#test-input').attr('data-set','0').val(""); }else{ $('#test-input').attr('data-set','1').val("Value Populated"); } } )

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

Answer 3

只需检查您是否有价值：

 $(document).ready(function() { $('#test-button').on('click',function() { if ($('#test-input').val()) { $('#test-input').val("") } else { $('#test-input').val("Value Populated") } }) })

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

Answer 4

您可以检查输入“test-input”中是否有值，如果没有添加文本，则删除文本 -

<script type="text/javascript">
 $('#test-button').click(function()
  {
     if ($('#test-input').val == '' || $('#test-input').val == null) {
       $('#test-input').val("Value Populated");
     } else {
       $('#test-input').val("");
     }
  }
)
</script>enter code here