JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<form>
  <input type="checkbox" name="value" value="1">
  <label>check1</label>
  <input type="checkbox" name="value" value="2" checked="checked">
  <label>check2</label>
  <input type="checkbox" name="value" value="3" checked="checked">
  <label>check3</label>
</form>
 
<p><tt id="results"></tt></p>
<p><tt id="results2"></tt></p>

JavaScript

function showValues() {
  var str = $('form').serialize()
  $('#results').text(str)

  var arr = $('form').serializeArray()
  var res = {}
  arr.forEach(function (item) {
    if (res[item.name]) {
      res[item.name] += ',' + item.value
    } else {
      res[item.name] = item.value
    }
  })
  $('#results2').text($.param(res))
  }
  $('input[type="checkbox"]').on('click', showValues )
  showValues()