如何在按鈕單擊時切換輸入值

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