JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" id="myForm">
  <input type="checkbox" name="id" value="1">
  <input type="checkbox" name="id" value="2">
  <input type="checkbox" name="id" value="3">
  <input type="checkbox" name="id" value="4">
  <input type="text" name="username" value="Василий Пупкин">
</form>
<pre id="out"></pre>

JavaScript

myForm.addEventListener('change', myFormChangeHandler);

function myFormChangeHandler() {
  const formData = new FormData(myForm);
  out.textContent =  new URLSearchParams(formData).toString();
}