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

Question

我有一个和一个领域。当我单击该按钮时，我希望输入字段填充一些文本。再次单击该按钮时，我希望填充的文本消失或变为 .buttoninputNull当我在线检查时，我只能找到从列表中的元素切换类的链接。我如何通过 ？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

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

<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

Answer 4

只需检查您是否有价值：

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