Скрытие содержимого строк таблицы на флажке

Я исправил это, я переосмыслил, Код с поправками был:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
$('#hidelive').click(function(e) {
$.each($(".badge"), function(){
if($(this).is(':contains("LIVE")')) {
$(this).closest("tr").toggle();
}
});
});
});
</script>

<div id="hidelive">Only show offline servers</div>

Серверы теперь прячутся по щелчку текста:)

Спасибо всем за предложения! Высоко ценится

Сценарий, который вам нужен, выглядит следующим образом:

<script>
$(".down-checkbox").click(function(){
    $.each($(".badge.badge-success"), function(){
        $(this).closest("tr").hide();
    });
});
</script>

JQuery выбирает все классифицированные строки «.badge.badge-success», которые являются Live-серверами, а оставшийся список будет содержать только серверы ВНИЗ.

<script>
    $("down-checkbox").click(function(){
        $("td .badge").each(function(){
            if($($this).text() == "LIVE"){
                $($this).hide();
            }
            else if($($this).text() == "DOWN"){
                $($this).show();
            }
        });
    });
</script>

Вы также можете использовать обратную логику, чтобы показать и скрыть основанный статус LIVE / DOWN

Есть несколько проблем с вашей логикой:

• $("down-checkbox") не является допустимым селектором. Вам не хватает ведущего . для селектора классов.
• Флажок не отображается. Удалить display: none
• Атрибут for в label должен ссылаться на id из input, а не на class.
• Используйте событие change при работе с флажками, а не click, поскольку у последнего есть проблемы с доступностью.
• Вы помещаете строку HTML в селектор jQuery, чтобы найти текст «LIVE». Это неверно, так как создаст элемент. Для поиска элемента используйте действительный селектор. В этом случае вы можете искать .badge-success, чтобы получить только живые экземпляры, а затем closest(), чтобы получить его родителя tr.
• hide() никогда не приведёт к повторному появлению строки, когда флажок снова будет установлен. Лучшая идея - использовать toggle(), передавая логическое состояние checked флажка, чтобы при необходимости скрыть / показать.

$(function() {
  $('.down-checkbox').change(function() {
    $('.badge-danger').closest('tr').toggle(this.checked);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="text-default">
  <input type="checkbox" class="down-checkbox" id="down" checked>
  <label for="down">Only show offline servers</label>
</span>
<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Server</th>
      <th>URL</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>test</td>
      <td>test.test.test</td>
      <td><span class="badge badge-success">LIVE</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td>test</td>
      <td>test.test.test</td>
      <td><span class="badge badge-danger">DOWN</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td>test</td>
      <td>test.test.test</td>
      <td><span class="badge badge-success">LIVE</span></td>
    </tr>
    <tr>
      <td>4</td>
      <td>test</td>
      <td>test.test.test</td>
      <td><span class="badge badge-danger">DOWN</span></td>
    </tr>
  </tbody>
</table>

Полностью согласился бы с хорошим ответом Рори, но если вы не заботитесь о рефакторинге в данный момент, попробуйте jQuery :contains selector: вы НЕ помещаете тег HTML внутри него, потому что, делая это, вы фактически создаете новый элемент вместо манипулирования существующими.

Просто для того, чтобы показать мою точку зрения, вот небольшая демонстрация, демонстрирующая разницу между двумя подходами:

$('#btn-create').click(function() {
  // This will create a new element dynamically 
  // and append it onto a div with class "container"
  $('<img src="https://via.placeholder.com/200" />').appendTo('div.container');
});

$('#btn-manipulate').click(function() {
  // This will manipulate the existing "img" element instead of creating a new, similar element
  $('img').css('width', '150px');
})

.container {
  background-color: lightgreen;
  display: inline-block;
  float: left;
  margin-right: 10px;
  height: 200px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <!-- Initially empty -->
</div>

<div class="btn-group">
  <button id="btn-create">Create new element</button>
  <button id="btn-manipulate">Manipulate existing element</button>
</div>