javascript - 如何序列化表单，而不是输入的值获取输入的 ID

Question

这是一个jsfiddle for reference .

我需要序列化一个表单，所以当用户点击提交时，我会得到用户以“序列化”格式选择的所有输入的 ID。我用它来获取表单 ID:

$("button").click(function(){
  $("div").text($("form").serialize());
});

问题是，它给了我表单的值。如何修改此代码以提供所选输入的 ID 而不是值？

这是 HTML:

<form action="">
  Choose one:<br>
  <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
  <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
  <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
</form>

<button>Serialize form</button>

<div></div>

因此，例如，当单击按钮时，序列化输出应该是“option1”、“option2”或“option3”，而不是“2.00”、“2.00”或“2.00”。

编辑
我希望有一种方法可以将“.attr('id')”合并到序列化中，我有

$(document).ready(function() {
  $('input').on('change', function () {
      alert($(this).attr('id'));
  });
});

这提醒我 ID，但我找不到将其合并到序列化中的方法。

Answer 1

另一种使用Array.from的实现方式

$(document).ready(function () {
    $('#form').bind('submit', function () {
        var serialize = Array.from($('input:checked'), e => "id=" + e.id).join('&');
        console.log(serialize);
        return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form action="" id="form">
    Choose one:<br>
    <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
    <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
    <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
<br/>
    Choose one:<br>
    <input type="checkbox" name="name1" id="option1" value="2.00">Option 1<br>
    <input type="checkbox" name="name2" id="option2" value="2.00">Option 2<br>
    <input type="checkbox" name="name3" id="option3" value="2.00">Option 3<br>
    <input type="submit" name="submit" value="Serialize form" id="submit" />
</form>