Change text of button if it has a display of none?

I have a list of of checkboxes that are being used a search fields for a database. When someone clicks a checkbox it will show a button with the text from the label of that checkbox. However, I need that button to be have empty text when it is not visible (in the case of someone clicking the checkbox to hide the button).

Here's my code:

$(document).ready(function() {
  $('#locationAll').click(function() {
    var value = $('#locationAll').parent().text();
    $('#location-all-button').html(value + " ×").toggle('fast');
  });
});

$(document).ready(function() {
  $('.search-popup').click(function() {
    $(this).hide('fast');
  });
  if ($('.search-popup').css('display') == 'none') {
    $(this).text("");
  };
});

button {
  background-color: lightgray;
  border-radius: 20px;
  display: none;
}

<link href="http://ift.tt/2apRjw3" rel="stylesheet" />
<script src="http://ift.tt/1oMJErh"></script>
<label>
  <input type="checkbox" value="all" id="locationAll" />All
</label>
<br>
<br>
<button class="search-popup btn" id="location-all-button"></button>

For some reason I can't make the button stay hidden before the checkbox on the example here but that isn't a problem in my full code. if you need more info let me know I might have missed something.