HTML 提交表格取决于复选框

Question

我有一个分页的表格，允许最终用户在表格中内联修改。

我正在使用一个提交按钮，该按钮使用 SSJS 重定向和保存输入。

我的表可能有 5k+ 条记录，并且该表将被分页。

我只想更新勾选了复选框的记录。

我正在使用此链接进行测试 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit

使用此代码：

 <!DOCTYPE html>
    <html>
    <body>
    
    <h2>HTML Forms</h2>
    
    <form action="/action_page.php">
    
    <table>
    <tr>
    <td>
    Check for save
    </td>
      <td>
      First name
      </td>
      <td>
    Last Name  
      </td>
      </tr>
    
      <tr>
      <td>
        <input type="checkbox" id="horns" name="feature" value="horns" />
      </td>
      <td>
      <input type="text" name="firstname" value="Mic1key">
      </td>
      <td>
      <input type="text" name="lastname" value="Mouse">
      </td>
    </tr>
      <tr>
      <td>
      <input type="checkbox" id="horns" name="feature" value="horns" />
      </td>
      <td>
      <input type="text" name="firstname" value="Mic1key">
      </td>
      <td>
      <input type="text" name="lastname" value="Mouse">
      </td>
    </tr>
      </table>
      <input type="submit" value="Submit">
    </form> 
    </body>
    </html>

所以这是可行的，因为在 SSJS 中我们可以检查哪些具有已检查的值，但是一旦表中有 5k+ 条记录，我就担心性能问题。

无论如何只提交选中复选框的记录？还是有什么不可告人的逻辑？

Answer 1

如果您只想在复选框被选中时提交表单，您可以为“提交”事件添加一个事件侦听器，并在复选框未选中时阻止默认设置：

let submitButton = document.getElementById('mySubmitBtn');
let checkbox = document.getElementById('myCheckbox');

submitButton.addEventListener('submit', function(e){
    if(!checkbox.checked){
        e.preventDefault();
    }
});

这种方式只有在复选框被选中时才会提交。

这个问题好像在这里Submit only non empty inputs得到解决