JS中的事件仅适用于foreach内部的第一个清单

Question

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

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

schedule.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 ，与其使用document.getElementById("id").style.display来显示和隐藏事物，不如使用jQuery，您可以只使用$("#id").show()和$("#id").hide()始终。