javascript - 取消选中所有复选框后如何清除输入

Question

我有 5 个复选框，我想在输入标记中显示所选复选框的值。一切工作正常，但是当我取消选中所有复选框时，输入始终返回最后一个未选中复选框的值。我想要的是当我取消选中所有复选框时，输入标记应该为空。

我尝试过使用 if 语句在每个框为空时清除输入，但有时会出现意外情况。我使用 jQuery 作为 JavaScript 库。

$('.checkbox_ss').click(function() {
  var text = '';
  $('.checkbox_ss:checked').each(function() {
    text += $(this).val();
    $('#checkVal').val(text);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="" id="check_holder">
  <div style="text-align: center;font-weight: bolder;color: white;background: dodgerblue;line-height: 1.7rem">Check Example</div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="1"><label for="">value 1</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="2"><label for="">value 2</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="3"><label for="">value 3</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="4"><label for="">value 4</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="5"><label for="">value 5</label></div>
</div>
<input type="text" id="checkVal">

Answer 1

如果没有选中任何框，则您的循环不会执行任何操作。因此它会在输入中保留旧值。

您应该更新循环外的值。

$('.checkbox_ss').click(function() {
  var text = '';
  $('.checkbox_ss:checked').each(function() {
    text += $(this).val();
  });
  $('#checkVal').val(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="" id="check_holder">
  <div style="text-align: center;font-weight: bolder;color: white;background: dodgerblue;line-height: 1.7rem">Check Example</div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="1"><label for="">value 1</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="2"><label for="">value 2</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="3"><label for="">value 3</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="4"><label for="">value 4</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="5"><label for="">value 5</label></div>
</div>
<input type="text" id="checkVal">