获取被选中checkbox的值为‘on‘该怎么解决？

最新推荐文章于 2023-11-04 10:20:50 发布

原创最新推荐文章于 2023-11-04 10:20:50 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #vue.js

springboot常见小bug 专栏收录该内容

1 篇文章

订阅专栏

本文讨论了在HTML表单中处理批量删除操作时，如何正确设置checkbox的value属性以获取正确的数据ID。未设置value属性会导致默认值为'on'，从而在获取选中项ID时产生错误。通过设置每个checkbox的value为对应的数据ID，可以确保正确无误地进行批量操作。

被选中checkbox的值为on：

这是因为input标签没有设置value属性的值，默认的值就是on，

这在实现批量删除操作想要获取表单被选中数据项的ID的时候容易忽视这一点。

<form method="post" th:action="@{/subscribe}">
            <td><input  type="checkbox" name="delete_checkbox" th:value="${rubbish.id}" ></td>

            <td id="td0" th:text="${rubbish.id}">1</td>

            <td id="td1" th:text="${rubbish.position}">海滩</td>

            <td id="td2" th:text="${rubbish.type}">木制品类</td>

            <td id="td3" th:text="${rubbish.quantity}">3453</td>

            <td id="td4" th:text="${rubbish.acquisitionTime}">2022-1-12</td>

            <td >
                 <a class="a1" th:onclick="show2()" href="#">编辑</a>
                 <a class="a1" th:href="@{deleteRubbish(id=${rubbish.id})}">删除</a>
            </td>
    <!--        th:href=""不能为空，要么就别写，否则报错找不到页面访问路径-->
        </form>