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

【问题标题】：Event in JS only works on first checklist inside of a foreachJS 中的事件仅适用于 foreach 内的第一个清单
【发布时间】：2016-01-14 00:41:25
【问题描述】：

我有一个功能可以监视复选框列表以检测是否选中了某些复选框。如果选择了一些按钮显示，否则按钮隐藏。复选框位于 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';
    };
});

【问题讨论】：

id 字段是唯一的，如果您想处理多个元素，请使用一个类。（见：Link）

标签： javascript php html foreach

【解决方案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()。

【讨论】：