Add Commas to checkbox array text Output

Question

I need "," between values (Commas or new line)
Output now: ab
Expected output: a,b

I'm just not sure where place it exactly. I get an extra comma every time at the start or at the end, like ",a,c" OR "a,c,".

$('.check').click(function() {
  $("#text").val('');
  $(".check").each(function() {
    if ($(this).prop('checked')) {
      $("#text").val($("#text").val() + $(this).val());
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" class="check" id="a" value="a"><label for="a"> a</label><br>
<input type="checkbox" name="b" class="check" id="b" value="b"><label for="b"> b</label>
<br>
<input type="checkbox" name="c" class="check" id="c" value="c"><label for="c"> c</label><br>
<input type="text" name="text" id="text">

One way is to concatenate a comma along with each new value. Another way is to build an array of values and join them with a comma. What have you tried and where do you get stuck? — showdev
– showdev, Commented Mar 12, 2021 at 22:42

showdev · Accepted Answer · 2021-03-12 23:16:08Z

1

I recommend selecting all checkboxes, filtering to only checked boxes, mapping values to an array, and joining the array by a comma.

let $checks = $('.check');

$checks.on('click', function() {

  let values = $checks
    .filter(':checked')
    .map((k, box) => box.value)
    .toArray()
    .join(',');

  $("#text").val(values);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" class="check" id="a" value="a"><label for="a"> a</label><br>
<input type="checkbox" name="b" class="check" id="b" value="b"><label for="b"> b</label>
<br>
<input type="checkbox" name="c" class="check" id="c" value="c"><label for="c"> c</label><br>
<input type="text" name="text" id="text">

Also see jQuery get values of checked checkboxes into array.

edited Mar 12, 2021 at 23:16

answered Mar 12, 2021 at 22:59

showdev

29.3k37 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add Commas to checkbox array text Output

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related