Closed. This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 12 hours ago. The community is reviewing whether to reopen this question as of 2 hours ago. Improve this 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> Run code snippetExpand snippet
Jese Leos
12 hours ago
Verified user
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> Run code snippetExpand snippet