多组Checkbox独立联动TextField的实现优化咨询

之前的代码中，所有复选框都绑定了全局change事件，导致两组Checkbox的选中值互相干扰，无法分别同步到各自对应的TextField。以下是修改后的完整实现，优化了代码结构，同时适配后续存入MariaDB数据库的需求：

<!-- 将jQuery引入统一放在页面头部，仅加载一次 -->
<script src="inc/jquery-3.7.0.min.js"></script>

<table>
    <tr>
        <td>
            Entsperrcode:
        </td>
        <td>
            <br>
            <table border="1" cellspacing="0" cellpadding="0">
                <tr>
                    <td><center>1</center></td>
                    <td><center>2</center></td>
                    <td><center>3</center></td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch1" value="1"></td>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch2" value="2"></td>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch3" value="3"></td>
                </tr>
                <tr>
                    <td><center>4</center></td>
                    <td><center>5</center></td>
                    <td><center>6</center></td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch4" value="4"></td>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch5" value="5"></td>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch6" value="6"></td>
                </tr>
                <tr>
                    <td><center>7</center></td>
                    <td><center>8</center></td>
                    <td><center>9</center></td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch7" value="7"></td>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch8" value="8"></td>
                    <td><input type="checkbox" class="entsperrcode-check" id="entsperrcodewisch9" value="9"></td>
                </tr>
            </table>
            <input type="text" id="selected" name="entsperrcode"/><br><br>
        </td>
    </tr>
    <tr>
        <td>
            Beschädigungen:
        </td>
        <td>
            <br>
            <input type="checkbox" class="beschaedig-check" id="beschaedingung1" value="Display"><br>
            <input type="checkbox" class="beschaedig-check" id="beschaedingung2" value="Rückseite"><br>
            <input type="checkbox" class="beschaedig-check" id="beschaedingung3" value="Rand"><br>

            <input type="text" id="beschaedig" name="beschaedig"/><br><br>
        </td>
    </tr>
</table>

<script>
// 封装复用的文本框更新逻辑
function updateTextField(checkboxGroupClass, targetTextFieldId) {
    $(checkboxGroupClass).change((e) => {
        const targetField = $('#' + targetTextFieldId);
        let curVal = targetField.val() || '';
        const checkboxValue = e.currentTarget.value;

        if ($(e.currentTarget).is(':checked')) {
            // 避免重复添加同一值
            if (!curVal.includes(checkboxValue)) {
                curVal = curVal ? `${curVal}-${checkboxValue}` : checkboxValue;
            }
        } else {
            // 取消选中时移除对应值
            curVal = curVal.split('-').filter(el => el.trim() !== checkboxValue).join('-');
        }
        targetField.val(curVal);
    });
}

// 分别初始化两组复选框的同步逻辑
updateTextField('.entsperrcode-check', 'selected');
updateTextField('.beschaedig-check', 'beschaedig');
</script>

关键改动说明 #

• 用类名区分复选框组：给每组复选框添加唯一类名（如.entsperrcode-check、.beschaedig-check），避免全局选择器触发所有复选框的事件
• 移除重复脚本引入：将jQuery的引入移到页面顶部，仅加载一次，提升性能并避免潜在冲突
• 封装复用函数：把选中值的处理逻辑封装成通用函数，后续新增复选框组时可直接复用，减少代码冗余
• 修正HTML结构：修复了原代码中缺失的<tr>标签，保证表格结构合法
• 优化值处理逻辑：添加重复值判断，避免同一复选框多次选中时重复生成分隔符和值

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