如何将选中复选框的关联标签文本与值存入jQuery数组并在implode后换行

1. 修正HTML标签关联问题 #

首先要修复label和checkbox的关联错误：label的for属性必须对应目标input的id，否则无法正确匹配标签与输入框。

<label for="servicelist1">Service 1: </label>
<input class="list" type="checkbox" name="servicelistcheckbox[]" id="servicelist1" value="Area 1"><br>
<label for="servicelist2">Service 2: </label>
<input class="list" type="checkbox" name="servicelistcheckbox[]" id="servicelist2" value="Area 2"><br>
<label for="servicelist3">Service 3: </label>
<input class="list" type="checkbox" name="servicelistcheckbox[]" id="servicelist3" value="Area 3"><br>

2. 修改jQuery代码，仅收集选中复选框的内容 #

调整选择器，只遍历已选中的复选框，再通过复选框的id找到对应标签，将标签文本和复选框值存入数组：

let values = [];

// 遍历所有选中的复选框
$("input[name='servicelistcheckbox[]']:checked").each(function() {
    const $checkbox = $(this);
    // 通过复选框id匹配对应标签
    const labelText = $(`label[for='${$checkbox.attr('id')}']`).text().trim();
    const checkboxValue = $checkbox.val();
    
    // 存入数组
    values.push(labelText);
    values.push(checkboxValue);
});

// 若需通过表单提交，可将数组转为隐藏输入框（示例）
$("form").find("input[name='servicelist[]']").remove();
values.forEach(val => {
    $("form").append(`<input type="hidden" name="servicelist[]" value="${val}">`);
});

3. PHP代码保持原有逻辑即可 #

你的PHP代码已经能正确处理每两个元素为一组的拼接，无需修改：

$serviceinfo = implode("", array_map(function($i){
    return implode("<br>", $i);
}, array_chunk($_POST['servicelist'], 2)));

这样最终只会收集选中复选框对应的标签文本和值，生成符合需求的内容。

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