CODEWITHSUNDEEP
javascriptjquery
Havish
Havish

Reputation: 33

Getting all the checked checkboxes values at any given point

I am stuck at one point and unable to proceed further. I am trying to implement something like this below. The idea is to implement this, If the checked checkbox length is greater than 2, then display the count else display the values of checkboxes. I am able to succeed in the checked checkboxes but unable to achieve when the user first checks the checkboxes and then unchecks. Please see the snippet. The output that I need at any point is to check if checkboxes length is greater than 2 and then do suitable actions. Can you please provide some light on this?

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>

I am stuck at the else part. ie. that is if the checkboxes are unchecked and the length is less than or equal to 2.

Upvotes: 0

Views: 158

Answers (2)

Havish
Havish

Reputation: 33

Here's my final code adding to the code which was given my @PeterKA

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>

Please let me know if this approach is correct or do I have to do any modifications.

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

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>

Upvotes: 1

Related Questions