使用jQuery获取复选框的多选值

针对你用WordPress+Elementor搭建的产品配置器需求，原脚本仅支持单选框取值，现在调整为适配复选框多选场景，核心修改点如下：

1. 调整选择器：由于复选框的name属性是带索引的数组格式（如color-group_666e2a1e0c4c07[0]），使用name^="前缀"的选择器匹配所有同组复选框
2. 多选值处理：通过map()方法收集所有选中复选框的value，转为数组后用指定分隔符拼接成字符串
3. 空状态处理：当没有选中项时，可设置默认提示文本

修改后的完整脚本 #

jQuery(document).ready(function() {
  // 匹配所有name以color-group_666e2a1e0c4c07开头的复选框
  $('input[name^="color-group_666e2a1e0c4c07"]').on("change", function() {
    // 收集所有选中复选框的value，转为数组
    var selectedColors = $('input[name^="color-group_666e2a1e0c4c07"]:checked').map(function() {
      return $(this).val();
    }).get();
    
    // 拼接成字符串，用逗号分隔；无选中项时显示默认文本
    var displayText = selectedColors.length > 0 ? selectedColors.join(', ') : '未选择颜色';
    jQuery("#screen").html(displayText);
  })
});

对应HTML结构（保留原有结构） #

<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"><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>

说明 #

• 选择器name^="color-group_666e2a1e0c4c07"会匹配所有name属性以此字符串开头的复选框，无需逐个指定索引
• map()方法遍历选中元素，get()将结果转为原生数组，join(', ')把数组元素拼接为带逗号分隔的字符串
• 可根据需求修改分隔符（如换行符<br>）或空状态提示文本

内容的提问来源于stack exchange，提问作者Paolofru