Get multiple values from checkbox with jquery

Question

I have a website created with wordpress and elementor.

In my product page there is a product configurator and, when a user make a selection, this script print the selected value into a div:

Each of this step configuration have a unique choice.

Now, I need to take values from a multiselection of checkboxes, can anyone help me in editing the script?

jQuery(document).ready(function() {
  $('input[name="color-group_266b5f37b0a48c"]').on("change", function() {
    var screen = $('input[name = "color-group_266b5f37b0a48c"]:checked').val();
    jQuery("#screen").html(screen);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<span id="screen" style="text-align: right;font-weight:500;">

<div class="wcpa_field wcpa_group_field wcpa_fl_col-4 wcpa_disp_squircle wcpa_selection_tick">
<div class="wcpa_color"><label>
    <div class="wcpa_color_wrap " style="height: 50px; width: 50px;">
        <input name="color-group_666e2a1e0c4c07[0]" type="checkbox" value="Pantone 319c">
        <div class="wcpa_color_bg" style="background-color: rgb(93, 192, 200);"> 
        </div>
    </div>
    <p class="wcpa_color_label"><span>Pantone 319c</span></p></label>
</div>
<div class="wcpa_color"><label>
    <div class="wcpa_color_wrap " style="height: 50px; width: 50px;">
        <input name="color-group_666e2a1e0c4c07[1]" type="checkbox" value="Pantone 299c">
        <div class="wcpa_color_bg" style="background-color: rgb(14, 163, 222);"> 
        </div>
    </div>
    <p class="wcpa_color_label"><span>Pantone 299c</span></p></label>
</div>
<div class="wcpa_color"><label>
    <div class="wcpa_color_wrap " style="height: 50px; width: 50px;">
        <input name="color-group_666e2a1e0c4c07[2]" type="checkbox" value="Pantone 274c">
        <div class="wcpa_color_bg" style="background-color: rgb(39, 38, 87);"> 
        </div>
    </div>
    <p class="wcpa_color_label"><span>Pantone 274c</span></p></label>
</div>
</div>

Answer 1

You need delegation and a better selector

Also your HTML was invalid and your group name was not what you posted

$(function() {
  const $checks = $('input[name^="color-group_666e2a1e0c4c07"]')
    .on("change", function() {
      const screen = $checks.filter(':checked')
        .map(function() {
          return this.value;
        })
        .get()
        .join(', ');
      $("#screen").text(screen);
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<span id="screen" style="text-align: right;font-weight:500;"></span>

<div class="wcpa_field wcpa_group_field wcpa_fl_col-4 wcpa_disp_squircle wcpa_selection_tick">
  <div class="wcpa_color">
    <div class="wcpa_color_wrap " style="height: 50px; width: 50px;">
      <input name="color-group_666e2a1e0c4c07[0]" type="checkbox" value="Pantone 319c">
      <div class="wcpa_color_bg" style="background-color: rgb(93, 192, 200);">
      </div>
    </div>
    <p class="wcpa_color_label"><span>Pantone 319c</span></p>
  </div>
  <div class="wcpa_color">
    <div class="wcpa_color_wrap " style="height: 50px; width: 50px;">
      <input name="color-group_666e2a1e0c4c07[1]" type="checkbox" value="Pantone 299c">
      <div class="wcpa_color_bg" style="background-color: rgb(14, 163, 222);">
      </div>
    </div>
    <p class="wcpa_color_label"><span>Pantone 299c</span></p>
  </div>
  <div class="wcpa_color">
    <div class="wcpa_color_wrap " style="height: 50px; width: 50px;">
      <input name="color-group_666e2a1e0c4c07[2]" type="checkbox" value="Pantone 274c">
      <div class="wcpa_color_bg" style="background-color: rgb(39, 38, 87);">
      </div>
    </div>
    <p class="wcpa_color_label"><span>Pantone 274c</span></p>
  </div>
</div>