getting all the checked checkbox values at a given point

Here is one way you can achieve your goal:

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 ) );
});

LIVE DEMO

$(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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top