获取任意给定点所有选中的复选框值

Question

我被困在某一点上，无法继续前进。我正在尝试实现下面这样的事情。这个想法是实现这一点，如果选中的复选框长度大于 2，则显示计数，否则显示复选框的值。我能够在选中的复选框中成功，但当用户首先选中复选框然后取消选中时无法实现。请看片段。我在任何时候需要的输出是检查复选框长度是否大于 2，然后执行适当的操作。您能否对此提供一些说明？

checkboxLength = 0;

$('input[name="checkname[]"]').click(function() {

  checkboxval = $(this).val();

  if ($(this).prop("checked")) {

    checkboxLength++;

    if (checkboxLength > 2) {

      $('.selecteditems').html('<span>' + checkboxLength + ' Options selected</span>');

    } else {

      $('.selecteditems').append('<span>' + checkboxval + '</span>');

    }

  } else {

    checkboxLength = checkboxLength - 1;

    $('.selecteditems').html('<span>' + checkboxLength + ' Options selected</span>');

  }

});

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

<div class="selecteditems"></div>

<div class="containerdiv">

  <input type="checkbox" name="checkname[]" value="Value 1">

  <label for="checkbox1">Value 1</label>

  <input type="checkbox" name="checkname[]" value="Value 2">

  <label for="checkbox2">Value 2</label>

  <input type="checkbox" name="checkname[]" value="Value 3">

  <label for="checkbox3">Value 3</label>

  <input type="checkbox" name="checkname[]" value="Value 4">

  <label for="checkbox4">Value 4</label>

  <input type="checkbox" name="checkname[]" value="Value 5">

  <label for="checkbox5">Value 5</label>

</div>

我被困在其他部分。IE。也就是说，如果复选框未选中且长度小于或等于 2。

Answer 1

这是实现目标的一种方法：const $cn = $('input[name="checkname[]"]');$cn.on('change', function() {&nbsp; &nbsp; const checkedLength = $cn.filter(':checked').length;&nbsp; &nbsp; console.log( checkedLength );&nbsp; &nbsp; const vals = $cn.filter(':checked').map((i,f) => f.value).get().join(',');&nbsp; &nbsp; const output = checkedLength > 2 ? `${checkedLength} options selected.` : vals;&nbsp; &nbsp; $('div.selecteditems').html( $('<span/>').text( output ) );});现场演示$(function() {&nbsp; &nbsp; const $cn = $('input[name="checkname[]"]');&nbsp; &nbsp; $cn.on('change', function() {&nbsp; &nbsp; &nbsp; &nbsp; const checkedLength = $cn.filter(':checked').length;&nbsp; &nbsp; &nbsp; &nbsp; console.log( checkedLength );&nbsp; &nbsp; &nbsp; &nbsp; const vals = $cn.filter(':checked').map((i,f) => f.value).get().join(',');&nbsp; &nbsp; &nbsp; &nbsp; const output = checkedLength > 2 ? `${checkedLength} options selected.` : vals;&nbsp; &nbsp; &nbsp; &nbsp; $('div.selecteditems').html( $('<span/>').text( output ) );&nbsp; &nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="selecteditems"></div><div class="containerdiv">&nbsp; <input type="checkbox" name="checkname[]" value="Value 1">&nbsp; <label for="checkbox1">Value 1</label>&nbsp; <input type="checkbox" name="checkname[]" value="Value 2">&nbsp; <label for="checkbox2">Value 2</label>&nbsp; <input type="checkbox" name="checkname[]" value="Value 3">&nbsp; <label for="checkbox3">Value 3</label>&nbsp; <input type="checkbox" name="checkname[]" value="Value 4">&nbsp; <label for="checkbox4">Value 4</label>&nbsp; <input type="checkbox" name="checkname[]" value="Value 5">&nbsp; <label for="checkbox5">Value 5</label></div>

Answer 2

const $cn = $('input[name="checkname[]"]');$cn.on('change', function() {  const checkedLength = $cn.filter(':checked').length;  const vals = $cn.filter(':checked').map((i, f) => f.value).get();  finalCheckedValue = '';  $.each(vals, function(index, checkedValue) {    finalCheckedValue += '<span>' + checkedValue + '</span>';  });  output = checkedLength > 2 ? `${checkedLength} options selected.` : finalCheckedValue;  $('div.selecteditems').html(output);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="selecteditems"></div><div class="containerdiv">  <input type="checkbox" name="checkname[]" value="Value 1">  <label for="checkbox1">Value 1</label>  <input type="checkbox" name="checkname[]" value="Value 2">  <label for="checkbox2">Value 2</label>  <input type="checkbox" name="checkname[]" value="Value 3">  <label for="checkbox3">Value 3</label>  <input type="checkbox" name="checkname[]" value="Value 4">  <label for="checkbox4">Value 4</label>  <input type="checkbox" name="checkname[]" value="Value 5">  <label for="checkbox5">Value 5</label></div>请让我知道这种方法是否正确或者我是否需要进行任何修改。