javascript - JS 中的事件仅适用于 foreach 内的第一个 list

Question

我有一个功能可以监视复选框列表以检测是否选择了某些复选框。如果选择了某些按钮，则按钮显示，否则按钮隐藏。该复选框位于 PHP 中的 foreach 内，可转换为复选框列表。

问题是只有第一个复选框显示删除按钮。

议程.php:

<tbody>
    <form id="delTask" name="delTask" method="POST" action="">
        <?php foreach ($tasks as $value): ?>
            <tr>
                <td>
                    <div class="checkbox">
                        <label>
                            <input name="excluir[]" value="<?php echo $value[0] ?>" id="taskSelect" type="checkbox">
                        </label>
                    </div>
                </td>
                <td><?php echo $value[1] ?></td>
                <td><span class="label label-success">+50</span></td>
            </tr>
        <?php endforeach; ?>
    </form>
</tbody>

app.js:

// Hide/Show button of del
$("#taskSelect").click(function () {
    if( $("#taskSelect").is(':checked') ) {
        $("#writeTask").hide();
        document.getElementById("deleteTask").style.display = 'block';
    } else {
        $("#writeTask").show();
        document.getElementById("deleteTask").style.display = 'none';
    };
});

Answer 1

问题是您有许多 ID 为 taskSelect 的复选框输入。元素 ID 在整个文档中必须是唯一的。相反，您需要使用类名，因为同一个类可以附加到多个元素:

<input name="excluir[]" value="<?php echo $value[0] ?>" class="taskSelect" type="checkbox">

然后，您可以在 jQuery 单击处理程序中使用像 .classname 这样的选择器，而不是 #id:

$(".taskSelect").click(function () {
    ...
});

顺便说一句，不用使用 document.getElementById("id").style.display 来显示和隐藏内容，因为您使用的是 jQuery，您只需使用 $("#id").show() 和 $("#id").hide() 贯穿始终。