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

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() {

    const checkedLength = $cn.filter(':checked').length;

    console.log( checkedLength );

    const vals = $cn.filter(':checked').map((i,f) => f.value).get().join(',');

    const output = checkedLength > 2 ? `${checkedLength} options selected.` : vals;

    $('div.selecteditems').html( $('<span/>').text( output ) );

});

现场演示

$(function() {

    const $cn = $('input[name="checkname[]"]');

    $cn.on('change', function() {

        const checkedLength = $cn.filter(':checked').length;

        console.log( checkedLength );

        const vals = $cn.filter(':checked').map((i,f) => f.value).get().join(',');

        const output = checkedLength > 2 ? `${checkedLength} options selected.` : vals;

        $('div.selecteditems').html( $('<span/>').text( 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>

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>

请让我知道这种方法是否正确或者我是否需要进行任何修改。