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

Question

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

我已尝试使用if-statement 来在每个框为空时清除输入，但有时会出现意外情况。我使用 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">

Answer 2

这是因为只有在有:checked 框时才更新元素的文本。

要解决此问题，您可以通过将val() 设置器移出循环来更新#checkVal 的文本，而不管复选框的状态如何。

您还可以修改逻辑以从复选框值构建数组并将其输出到元素的文本中。试试这个：

$('.checkbox_ss').click(function() {
  var values = $('.checkbox_ss:checked').map(function() { return this.value; }).get();
  $('#checkVal').val(values.join(''));
});

<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>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="1">
      value 1
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="2">
      value 2
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="3">
      value 3
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="4">
      value 4
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="5">
      value 5
    </label>
  </div>
</div>
<input type="text" id="checkVal">

另请注意，您的 label 元素没有任何影响，因此我已在您的 HTML 中对其进行了修改。

Answer 3

首先将您的值设置为空字符串，然后遍历您的复选框。

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