嘿，我完全懂你碰到的这个坑——肯定是你用了同一个全局状态来控制所有条目的输入框显示/隐藏，所以只要有一个复选框被勾选，所有输入框都会跟着冒出来。咱们来快速搞定这个问题：

核心问题分析 #

你之前的逻辑大概率是这样的：比如用了一个全局变量（比如PHP的$showInput或者前端的一个通用类），没有给每个条目绑定独立的标识，导致触发时所有元素都被统一修改了。要解决这个，关键是让每个复选框和对应的输入框一一绑定，只操作当前选中条目的元素。

最优解决方案：前端JS精准控制（无需刷新页面） #

这种方式体验最好，不用来回提交页面，直接在前端动态处理。下面是完整的代码示例：

PHP渲染表格部分 #

<?php
// 模拟数据库获取的条目数据
$dbItems = [
    ['id' => 101, 'title' => '用户订单A'],
    ['id' => 102, 'title' => '用户订单B'],
    ['id' => 103, 'title' => '用户订单C'],
];
?>

<table border="1" cellpadding="8">
    <thead>
        <tr>
            <th>选择</th>
            <th>条目名称</th>
            <th>额外操作</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($dbItems as $item): ?>
        <tr>
            <td>
                <!-- 给复选框添加data-id属性，绑定当前条目的ID -->
                <input type="checkbox" class="item-selector" data-item-id="<?= $item['id'] ?>">
            </td>
            <td><?= htmlspecialchars($item['title']) ?></td>
            <td>
                <!-- 输入框默认隐藏，用唯一ID和条目ID关联 -->
                <input 
                    type="text" 
                    class="extra-field" 
                    id="extra-field-<?= $item['id'] ?>" 
                    style="display: none;" 
                    placeholder="输入额外信息..."
                >
            </td>
        </tr>
        <?php endforeach; ?>
    </tbody>
</table>

前端JS逻辑部分 #

// 获取所有条目复选框
const selectors = document.querySelectorAll('.item-selector');

selectors.forEach(selector => {
    // 给每个复选框绑定change事件
    selector.addEventListener('change', function() {
        // 获取当前选中条目的ID
        const itemId = this.dataset.itemId;
        // 找到对应的输入框元素
        const targetField = document.getElementById(`extra-field-${itemId}`);
        
        // 根据复选框状态切换显示/隐藏
        if (this.checked) {
            targetField.style.display = 'inline-block'; // 或者block，看你需要的布局
        } else {
            targetField.style.display = 'none';
        }
    });
});

代码说明 #

1. 绑定唯一标识：每个复选框通过data-item-id存储当前条目的数据库ID，输入框的ID用extra-field-+条目ID命名，确保一一对应。
2. 精准操作元素：当复选框状态变化时，JS只找到对应ID的输入框，修改它的显示状态，完全不会影响其他条目。
3. 安全输出：用htmlspecialchars()转义条目名称，防止XSS攻击，这是PHP输出用户内容的好习惯。

可选：如果需要全选功能 #

要是你需要全选按钮，可以加这段逻辑：

// 假设你有一个id为select-all的全选复选框
const selectAll = document.getElementById('select-all');
const allFields = document.querySelectorAll('.extra-field');

selectAll.addEventListener('change', function() {
    selectors.forEach(selector => {
        selector.checked = this.checked;
        // 同步切换对应输入框的显示状态
        const itemId = selector.dataset.itemId;
        document.getElementById(`extra-field-${itemId}`).style.display = this.checked ? 'inline-block' : 'none';
    });
});

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