Как группировать checkbox по name?

554

06 марта 2018, 05:31

Как группировать checkbox по name?

Получаю a[0]=1&a[1]=2&a[2]=3&b[3]=1&b[4]=2&c[5]=1&c[6]=2
Как можно получить типа так?

a[0]=1&a[1]=2&a[2]=3&b[0]=1&b[1]=2&c[0]=1&c[1]=2

document.querySelector('button').onclick = function(e) { 
  var serialize = '', 
    checkbox = e.target.form.querySelectorAll('input[type=checkbox]'); 
  for (var i = 0; i < checkbox.length; ++i) { 
    if (checkbox[i].type === 'checkbox' && checkbox[i].checked) { 
      serialize += '&' + checkbox[i].name + '[' + i + ']=' + checkbox[i].value; 
    } 
  } 
  console.log(serialize.substr(1)); 
  return false; 
}

<form action="" id="form"> 
  <input type="checkbox" name="a" value="1" /> 
  <input type="checkbox" name="a" value="2" /> 
  <input type="checkbox" name="a" value="3" /> 
  <input type="checkbox" name="b" value="1" /> 
  <input type="checkbox" name="b" value="2" /> 
  <input type="checkbox" name="c" value="1" /> 
  <input type="checkbox" name="c" value="2" /> 
  <button>Go</button> 
</form>

Answer 1

Сначала из перечисления делаем массив, затем его сортируем.

document.querySelector('button').onclick = function(e) { 
  var serialize = ''; 
  var checkboxAll = e.target.form.querySelectorAll('input[type=checkbox]'); 
 
  var checkboxArray = Array.from(checkboxAll); 
  checkboxArray = checkboxArray.sort((x, y) => { return x.name.localeCompare(y.name) }); 
 
  for (var i = 0; i < checkboxArray.length; ++i) { 
    if (checkboxArray[i].type === 'checkbox' && checkboxArray[i].checked) { 
      serialize += '&' + checkboxArray[i].name + '[' + i + ']=' + checkboxArray[i].value; 
    } 
  } 
  console.log(serialize.substr(1)); 
  return false; 
}

<form action="" id="form"> 
  <input type="checkbox" name="a" value="1" /> 
  <input type="checkbox" name="a" value="2" /> 
  <input type="checkbox" name="a" value="3" /> 
  <input type="checkbox" name="b" value="1" /> 
  <input type="checkbox" name="b" value="2" /> 
  <input type="checkbox" name="c" value="1" /> 
  <input type="checkbox" name="c" value="2" /> 
  <button>Go</button> 
</form>