Question

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

我尝试过使用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">

Answer 2

这是因为仅当有Land框时才更新元素的文本。

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

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

val()

$('.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">元素没有任何影响，因此我在您的HTML中对其进行了修改。

Answer 3

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

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

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

3 个答案: