当TextField内容更新时自动勾选对应Checkbox的实现方法

你的代码存在两个核心问题：

• 所有复选框的ID都是order_id_list，ID重复会导致JavaScript无法精准定位单个复选框
• 教程代码是硬编码固定ID的逻辑，完全不匹配你这种动态生成的订单列表场景

步骤1：修正复选框ID，保证唯一性 #

先把复选框的ID改成带订单ID的格式，确保每个订单的复选框唯一：

<input type="checkbox" class="order_id_list" name="order_id_list[]" id="order_id_list_{$order.id_order}" value="{$order.id_order}" />

步骤2：给文本框添加输入监听，自动勾选对应复选框 #

使用input事件（输入/粘贴时实时触发，比click更贴合需求），通过文本框ID拆分出订单ID，再定位到对应复选框并勾选：

<!-- 修改后的文本框，绑定input事件 -->
<input type="text" name="weight_{$order.id_order}" id="weight_{$order.id_order}" size="7" value="{$order.weight}" oninput="checkCorrespondingBox(this)" />

<script>
function checkCorrespondingBox(textInput) {
    // 从文本框ID中拆分出订单ID
    const orderId = textInput.id.split('_')[1];
    // 找到对应订单的复选框
    const checkbox = document.getElementById(`order_id_list_${orderId}`);
    // 可选：文本框有内容才勾选，若只要触发输入就勾选，直接写checkbox.checked = true
    checkbox.checked = textInput.value.trim() !== '';
}
</script>

逻辑说明 #

• 文本框ID格式为weight_xxx，拆分后能直接拿到中间的订单ID
• 用订单ID拼接出对应复选框的唯一IDorder_id_list_xxx，实现精准定位
• input事件覆盖用户输入、粘贴等所有修改文本框内容的操作，确保勾选状态实时同步

内容的提问来源于stack exchange，提问作者Cyril-260