JS中的事件只适用于foreach中的第一个检查表

Event in JS only works on first checklist inside of a foreach

本文关键字：第一个 检查表 foreach 事件 JS 适用于      更新时间：2023-09-26

我有一个函数，它监视复选框列表，以检测是否选中了一些复选框。如果选择了一些，则按钮会显示，否则按钮会隐藏。复选框位于PHP中的foreach中，用于转换为复选框列表。

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

agenda.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';
    };
});

问题是有许多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()。

相关文章：