表单提交时如何获取选中单选按钮的data-*自定义属性？

当然可以搞定这个需求！serializeArray()确实只默认收集表单元素的name和value，但我们可以手动遍历选中的单选按钮，把自定义的data属性也整合进去，完美适配多组单选的情况。

解决方案思路 #

1. 拦截表单的默认提交行为（避免页面直接刷新）
2. 精准筛选出表单内所有被选中的单选按钮（因为每组单选name相同，只会有一个被选中）
3. 遍历这些选中的元素，收集name、value以及data-application属性
4. 整理成符合需求的数组，就可以直接用于数据库更新了

修改后的JavaScript代码 #

$("#preference-form").on('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 收集当前表单内所有被选中的单选按钮
  const selectedRadios = $(':radio:checked', this);
  const formData = [];
  
  // 遍历选中的单选元素，组装需要的数据
  selectedRadios.each(function() {
    formData.push({
      name: $(this).attr('name'),
      value: $(this).val(),
      applicationId: $(this).data('application') // 用data()快速获取data-application属性
      // 若需要原始属性字符串，可改用：$(this).attr('data-application')
    });
  });
  
  console.log(formData);
  // 这里就可以把formData传给后端接口，用于更新数据库记录了
});

关键细节说明 #

• $(':radio:checked', this)：限定在当前表单范围内查找被选中的单选按钮，避免干扰页面其他表单元素
• $(this).data('application')：jQuery的data()方法会自动处理data-*的命名规则（比如把data-application转换成驼峰式的application），如果需要保留原始属性名的字符串，用attr('data-application')更合适
• 由于每组单选按钮的name相同，同一组只会有一个被选中，所以遍历后得到的formData数组里，每组单选对应一条数据，完全匹配你更新数据库的需求

内容的提问来源于stack exchange，提问作者artomason