PHP实现勾选数组中对应ID的复选框时出现视图错乱如何解决

问题根源 #

你的代码使用了两层嵌套循环：外层遍历全量设施集合$facilities，内层遍历用户已选设施集合$checked_facility，这会导致每个全量设施都会被重复输出N次（N等于已选设施的总数），大量重复的DOM元素就是你视图错乱的直接原因。

修复方案 #

步骤1：提前提取已选设施ID

先把已选设施的ID提取为一维索引数组，避免循环内重复遍历判断，同时提升渲染效率：

<?php
// 仅需执行一次，提取所有已选的facilities_id
$checked_facility_ids = array_column($checked_facility, 'facilities_id');
?>

步骤2：重构视图循环代码

去掉内层的嵌套循环，每个设施仅渲染一次，直接判断当前设施ID是否在已选ID集合中即可：

<?php if($facilities) foreach($facilities as $facility):  ?>
<fieldset class="availablenetworked">
    <input type="checkbox" 
        <?php echo in_array($facility['id'], $checked_facility_ids) ? 'checked' : ''; ?> 
        name="facility[]" 
        id="<?php echo $facility['id'] ?>" 
        value="<?php echo $facility['id'] ?>"> 
    <label for="<?php echo $facility['id'] ?>"><?php echo $facility['title'] ?></label>
</fieldset>
<?php endforeach; ?>

额外优化提示 #

你原来的代码中循环输出的fieldset都使用了相同的id="availablenetworked"，不符合HTML id全局唯一的规范，可能会导致样式、JS逻辑异常，建议改成class="availablenetworked"或者给每个fieldset生成唯一id。

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